Textarea
Multi-line free-form text. Aligned with J&J DS v1.2 (Figma 20985:10531). Wrap in a Field for label / helper / validation / required, just like TextInput. Resizable vertically by default.
Default + helper
Anything we should know?
Show sourceHide source
<Field label="Notes" description="Anything we should know?">
<Textarea placeholder="Type your notes…" />
</Field>With value
Filled textareas show the input text in text-01 (near-black).
Show sourceHide source
<Field label="Description"><Textarea defaultValue="Lorem ipsum…" /></Field>Error and warning
Bio is required
Approaching length limit
Show sourceHide source
<Field label="Bio" status="error" message="Bio is required">
<Textarea placeholder="Tell us about yourself…" />
</Field>
<Field label="Bio" status="warning" message="Approaching length limit">
<Textarea defaultValue="…" />
</Field>Disabled / read-only
Show sourceHide source
<Field label="Locked" disabled><Textarea defaultValue="…" /></Field>
<Field label="Submitted on"><Textarea readOnly defaultValue="…" /></Field>Character counter
Track length yourself and render the counter in the Field message slot. Switch to status='error' over the limit.
123/250
Show sourceHide source
const [value, setValue] = useState(""); const max = 250;
<Field
label="Description"
message={`${value.length}/${max}`}
status={value.length > max ? "error" : "default"}
>
<Textarea value={value} onChange={(e) => setValue(e.target.value)} maxLength={max + 50} />
</Field>