shadcn.io is not affiliated with official shadcn/ui
When most of a form is required, mark the exceptions. This example adds a muted (optional) note inside the Middle Name label, smaller and lighter than the label itself, so people can skip the field with confidence. Use it in sign-up, profile and checkout forms where only a few fields can be left empty.
Preview
Installation
FAQ
How is the optional note styled?
It's a span inside FieldLabel with text-xs, font-normal and text-muted-foreground, so it reads as secondary to the label. The label's own gap spaces it from Middle Name.
Do screen readers hear (optional)?
Yes. The note is part of the label's text, so the field is announced as Middle Name (optional).
Is the input itself marked optional?
No attribute is needed: a field without required is optional. The note only tells people so.
Should I mark optional or required fields?
Mark whichever is rarer. When most fields are required, label the optional ones, as here; when most are optional, mark the required ones with an asterisk, as in the Required Field example.
Related
- Required Field InputA required field with an asterisk in its
- Input with LabelA text input with a label above it
- Form with Optional FieldsA form with required name and email
- 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