shadcn.io is not affiliated with official shadcn/ui
Label examples · Standard
Label with Optional Indicator for React
A label with a muted (optional) marker for a field that isn't required.
When most fields are required, mark the few that aren't. The Label says Phone Number and a muted, normal-weight (optional) follows it, so people know they can skip the field.
Preview
Installation
FAQ
How is the optional marker written?
As the text (optional) inside the label, after Phone Number. The span is font-normal text-muted-foreground.
Why does the marker look quieter than the caption?
Label is font-medium. The span sets font-normal and text-muted-foreground, so the word optional drops the weight and uses the muted color.
What puts (optional) on the same line?
Label is a flex row with gap-2. The span is a child, so it follows Phone Number. The file adds no margin class.
Does (optional) change validation?
No. There is no input in the file. The marker is text. Leave required off the control when that field can be empty.
Related
- Required LabelA label with a destructive asterisk that
- Label with DescriptionA label with a line of muted helper text
- Error LabelA label in the destructive color with an
- Input with LabelA text input with a label above it
- Label with TooltipA label with an info button that opens a
- Label with BadgeA label with a secondary badge that marks