shadcn.io is not affiliated with official shadcn/ui
Input examples · Standard
Required Field Input for React
A required field with an asterisk in its label and a note explaining it.
An asterisk is the common sign for a required field, as long as the form says what it means. This example adds a red asterisk to the Full Name label, marks the input required so the browser checks it, and explains the asterisk in a description under the field. Use it in forms where a few fields must be filled in.
Preview
Installation
FAQ
How is the asterisk shown?
A span with text-destructive inside FieldLabel. It has aria-hidden, because the input's required state already tells assistive technology the field is required.
What does required do when the form is submitted?
The browser blocks the submit while the field is empty and shows its own message. Screen readers announce the field as required.
Why explain the asterisk?
Not everyone knows the convention. The description, * Required field, says it once; in a longer form, put the note at the top.
Related
- Optional Field InputA field whose label marks it as optional
- Input with LabelA text input with a label above it
- Required Field Validation FormA name and an email field marked with
- Simple Input with Label FieldAn email input with its label above it
- Required LabelA label with a destructive asterisk that
- Input with DescriptionA field with a description between its