TextArea

Enter a multi-line text value.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Field
TextArea example
import { TextArea } from "@/shim-ui/text-area";

export default () => <TextArea label="Note" />;

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add text-area

Label position

Use the labelPosition prop to place the label.

Label position example
import { TextArea } from "@/shim-ui/text-area";

export default () => <TextArea label="Note" labelPosition="side" />;

Size

Use the size prop to adjust the control height and typography.

Size example
import { TextArea } from "@/shim-ui/text-area";

export default () => (
  <>
    <TextArea label="Note" placeholder="Add a note" size={1} />
    <TextArea label="Note" placeholder="Add a note" size={2} />
  </>
);

Variant

Select a variant to match the text area with its container.

Variant example
import { TextArea } from "@/shim-ui/text-area";

export default () => (
  <>
    <TextArea label="Note" variant="classic" />
    <TextArea label="Note" variant="soft" />
    <TextArea label="Note" variant="outline" />
  </>
);