uix-uiTextarea
Multi-line input. 3 styles × 4 states.
import { Textarea } from "@/components/ui/textarea";
export default function Example() {
return (
<div style={{ width: 360, maxWidth: "100%" }}>
<Textarea label="Gift note" placeholder="Write a few words for the card." rows={3} />
</div>
);
}
Installation
$ npx uix-ui@latest add textareaThis copies the file into components/ui/textarea.tsx in your project. npx shadcn@latest add @uix/textarea works too.
Usage
import { Textarea } from "@/components/ui/textarea";
<div style={{ width: 360, maxWidth: "100%" }}>
<Textarea label="Gift note" placeholder="Write a few words for the card." rows={3} />
</div>
Examples
Filled and error
Tell us a little more (20 characters at least).
import { Textarea } from "@/components/ui/textarea";
export default function Example() {
return (
<div style={{ width: 360, display: "grid", gap: 16 }}>
<Textarea appearance="filled" label="Delivery note" defaultValue="Please ring the bell twice." rows={2} />
<Textarea label="Review" error="Tell us a little more (20 characters at least)." defaultValue="Nice." rows={2} />
</div>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
appearance | outline | filled | underline | "outline" | |
label | React.ReactNode | – | |
secondaryLabel | React.ReactNode | – | Right-aligned note next to the label, for example "Optional". |
feedback | React.ReactNode | – | Message under the field. |
helper | React.ReactNode | – | Same as feedback. |
error | string | – | Error message; also marks the field invalid and replaces the feedback. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts