Collects multi-line text; grows with its text from minRows to maxRows, then scrolls.
<Field>
<Field.Label>Description</Field.Label>
<Textarea placeholder="What does this change do, and why?" />
<Field.Description>Reviewers read this first.</Field.Description>
</Field>pnpm add @usefragments/uiImport styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.
maxLength shows a live count under the field.
<Field>
<Field.Label>Bio</Field.Label>
<Textarea
maxLength={200}
defaultValue="Design engineer on the checkout team. I look after our tokens and the standards every screen is checked against."
/>The danger edge with the reason under the field.
<Field invalid>
<Field.Label>Reason for the exception</Field.Label>
<Textarea placeholder="Why does this screen need a raw value?" />
<Field.Error match>Add a reason so reviewers can approve the exception.</Field.Error>
</Field>Starts at one row, grows to six, then scrolls.
<Field>
<Field.Label>Notes</Field.Label>
<Textarea
minRows={1}
maxRows={6}
defaultValue={'Checkout: three raw colours\nCart: one spacing value\nHeader: icon button without a label'}Four steps on the control ladder.
<Stack gap="sm">
<Textarea aria-label="Extra small" placeholder="Extra small" size="xs" minRows={1} />
<Textarea aria-label="Small" placeholder="Small" size="sm" minRows={1} />
<Textarea aria-label="Medium" placeholder="Medium" size="md" minRows={1} />
<Textarea aria-label="Large" placeholder="Large" size="lg" minRows={1} />
</Stack>resize="none" removes the drag handle.
<Field>
<Field.Label>Release notes</Field.Label>
<Textarea
resize="none"
defaultValue="Buttons, inputs and selects now share one control height ladder, so a row of mixed controls lines up without overrides."
/>Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | undefined | Not set | Initial value for uncontrolled use |
invalid | boolean | undefined | false | The danger edge and aria-invalid; say why in a Field.Error |
maxLength | number | undefined | Not set | The most characters allowed. Setting it shows a counter under the field |
maxRows | number | undefined | Not set | Rows the field grows to before it scrolls. Omit to grow without limit |
minRows | number | undefined | 3 | Rows shown when empty; the field grows from here as text is added |
onValueChange | ((value: string) => void) | undefined | Not set | Called with the new value on every change |
resize | "none" | "vertical" | undefinednonevertical | vertical | Whether the person can drag the height. Width never resizes: it would break the column measure |
size | TextareaSize | undefinedxssmmdlg | "md" | Type size, inset and one-row height on the shared control ladder |
value | string | undefined | Not set | Controlled value |
placeholder | string | undefined | Not set | Placeholder text |
disabled | boolean | undefined | false | Dims the field and blocks input |
readOnly | boolean | undefined | false | Shows the text on a dashed edge without letting it change |
onChange | ChangeEventHandler<HTMLTextAreaElement> | undefined | Not set | The native change event |
name | string | undefined | Not set | Form field name |
required | boolean | undefined | Not set | Marks the field required for form validation |
className | string | undefined | Not set | Class on the textarea |
style | CSSProperties | undefined | Not set | — |