Atoms / Textarea

Textarea

<Textarea />Stable

Multi-line text field for longer-form input. Auto-grows with content via Tailwind's field-sizing-content.

import { Textarea } from "@/components/upnext";

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

State

Rows

Label

<Textarea placeholder="Notes about this recruit…" rows={5} />

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

Preview

Code

import { Textarea } from "@/components/upnext";


<Textarea />

States

import { Textarea } from "@/components/upnext";


export function Example() {
  return <Textarea placeholder="Add a note about this recruit…" />;
}

Composition

import { Textarea, Label } from "@/components/upnext";


export function Example() {
  return (
    <div className="grid gap-1.5">
      <Label htmlFor="notes">Coach notes</Label>
      <Textarea id="notes" placeholder="What did you see in the film?" />
    </div>
  );
}

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.