A complete, controlled multi-line text field: label, a <textarea>, and helper/error text, wired together via FormComponent. Auto-grows to fit its content by default.
Use @uxf/form/textarea inside a @uxf/form form — it wires up react-hook-form (registers the field, runs the required validation, and reads the form context). For a standalone, controlled multi-line field outside a form, use @uxf/ui/textarea.
For a single-line field, use TextInput.
import { Textarea } from "@uxf/ui/textarea";
import { useState } from "react";
function Example() {
const [value, setValue] = useState("");
return (
<Textarea label="Message" name="message" onChange={setValue} placeholder="Placeholder text..." value={value} />
);
}
onChange receives the new value first, then the change event: (value: string, event?) => void.
Extends FormControlProps<string, HTMLTextAreaElement>.
| Prop | Type | Default | Description |
|---|---|---|---|
value * | string | — | Current value. |
onChange * | (value: string, event?) => void | — | Called with the new value. |
name * | string | — | Field name. |
label | ReactNode | — | Label text (rendered above the field). |
hiddenLabel | boolean | false | Visually hides the label (kept for screen readers). |
helperText | ReactNode | — | Helper/error text below the field. Styled as an error when isInvalid. |
placeholder | string | — | Placeholder text. |
rows | number | 4 | Minimum visible rows; also the baseline for auto-height. |
disableAutoHeight | boolean | false | Disables auto-growing; the textarea stays a fixed rows tall. |
isInvalid | boolean | false | Invalid state (error styling, aria-invalid, links aria-describedby to the helper text). |
isDisabled | boolean | false | Disabled state. |
isReadOnly | boolean | false | Read-only state. |
isRequired | boolean | false | Marks the field required (label marker + native required). |
isFocused | boolean | — | Forces the focused visual state. |
autoComplete | string | — | Native autocomplete. |
maxLength, minLength | number | — | Native length constraints. |
id, form | string | — | Native attributes. id is auto-generated if omitted. |
onBlur, onFocus | FocusEventHandler<HTMLTextAreaElement> | — | Focus handlers. |
className | string | — | Extra class on the root element. |
style | CSSProperties | — | Inline style on the textarea wrapper. |
* required
The forwarded ref points to the underlying <textarea>.
Auto-height is on by default; the field grows with its content down to rows lines. Set disableAutoHeight for a fixed-height textarea. Behavioural states are set via isInvalid, isDisabled, isReadOnly, isRequired, and isFocused.
Import the component stylesheets once in your global CSS:
@import url("@uxf/ui/css/textarea.css");
@import url("@uxf/ui/css/label.css");
@import url("@uxf/ui/css/form-component.css");