shadcn.io is not affiliated with official shadcn/ui
Every field needs a label. This example is the basic pattern: a Field with a FieldLabel reading Name above a text input, linked so that clicking the label focuses the field. Start here and add a description, an error or an icon as the other examples show.
Preview
Installation
FAQ
How is the field built?
Field stacks its children vertically with a gap: FieldLabel first, then the Input. w-full max-w-sm sets the width.
How is the label tied to the input?
Clicking the label focuses the field, and screen readers announce it with the field.
FieldLabel sets htmlFor to label-name, the input's id.
Why not use only a placeholder?
A placeholder disappears as soon as people type, isn't a reliable accessible name, and is low contrast. Keep the label; use the placeholder, Enter your name, only as a hint.
What type is the input?
text. Set the type that matches the data, such as email, tel or url, to get the right keyboard on phones and the browser's validation.
Related
- Input with DescriptionA field with a description between its
- Input with Helper TextAn email field with helper text under it
- Simple Text Input FormA form with one username text input that
- Simple Input with Label FieldAn email input with its label above it
- Required LabelA label with a destructive asterisk that
- Optional Field InputA field whose label marks it as optional