shadcn.io is not affiliated with official shadcn/ui
Input examples · Standard
Input with Description for React
A field with a description between its label and the input.
Some fields need explaining before people type. This example puts a FieldDescription between the Username label and the input, so the note, This will be your unique identifier on the platform, is read before the field. Use it when the description changes what people will enter.
Preview
Installation
FAQ
Why is the description above the input?
So it's read before typing. Put guidance that shapes the answer, such as what a username is for, above the field; put reassurance or format hints below it, as the Helper Text example does.
What is FieldDescription?
Muted, smaller text for a field's explanation. It tightens its spacing next to the label, so the label and the description read as one block above the input.
What kind of input is it?
A type text input with the placeholder johndoe, at the field's full width up to max-w-sm.
Do screen readers read the description?
They reach it in reading order, between the label and the input. To have it read when the input gets focus, give it an id and set aria-describedby on the input to it.
Related
- Input with LabelA text input with a label above it
- Input with Helper TextAn email field with helper text under it
- Simple Input with Label FieldAn email input with its label above it
- Simple Text Input FormA form with one username text input that
- Required Field InputA required field with an asterisk in its
- Required LabelA label with a destructive asterisk that