Primitives
Textarea
A multi-line text input that grows with what is typed.
Usage
import { Label, Textarea } from "@cadence-clinical/ui";
<Label htmlFor="visit-notes">Notes for the clinic</Label>
<Textarea id="visit-notes" />Textarea is a native textarea and accepts all of its props. It is rendered through Base UI's Field Control, so a Field can name it, describe it and mark it invalid, as it does an Input. It follows the shadcn Textarea, and its states match Input: read-only keeps full contrast, disabled is faded, and invalid is a heavier border that needs a message in text.
What Cadence changes
- It grows with what is typed, where the browser supports
field-sizing, so a long note is not hidden behind a scrollbar. Elsewhere it keeps its height and can be dragged taller. - Padding and text follow the density, and the first line sits where an Input's text does.
- Text is 16px on a touch device, so iOS does not zoom on focus.
- The boundary and focus ring are never faded.
Accessibility
- Give every textarea a Label or an
aria-label. A placeholder is not a name.