shadcn.io is an independent project built on shadcn/ui
The label Notes comes first. The line Add any additional notes here sits between that label and the textarea. The placeholder is Type here.
Use it when people need an instruction before they type. A note about where the text ends up can sit under the field instead. One line belongs in an Input. In Solid, Ark UI does not turn that line into an error.
Installation
Anatomy
Usage
<Field class="max-w-md">
<FieldLabel>Notes</FieldLabel>
<FieldDescription>Add any additional notes here</FieldDescription>
<Textarea class="bg-background" placeholder="Type here..." />
</Field>FAQ
When should I add description text below the label?
When the label alone doesn't say enough: a format to follow, a limit, who will read it. If the description only repeats the label, such as Notes and Enter notes, drop it.
Why use text-muted-foreground for description text?
FieldDescription uses the muted color and a smaller size so the label stays the first thing people read and the description reads as supporting text. The muted token keeps enough contrast in both themes.
How much spacing should be between label and description?
Field spaces its children evenly, and a FieldDescription followed by one more child pulls itself up a little, so the label and description read as a pair with the field a step below. Change the gap on the Field if your form needs another rhythm.
How long should description text be?
One short sentence. For several rules, link to a help page or use a list, rather than a paragraph people will skip.
How do I show error messages with description text?
Keep the description and add a FieldError under the Textarea when the value is wrong, with the Field marked invalid. The guidance stays visible while people fix the error, and the border turns destructive.
Do screen readers announce description text?
They read it in order, between the label and the field. To have it announced when the Textarea gets focus, give the description an id and point the Textarea's aria-describedby at it.
Or use FieldHelper in its place: the Field links it to the Textarea for you.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Textarea
Sets placeholder="Type here...". The rest is on the Textarea page.
