shadcn.io is not affiliated with official shadcn/ui
Label examples · Standard
Required Label for React
A label with a destructive asterisk that marks the field as required.
The familiar asterisk for required fields. The Label says Email and a span with text-destructive holds the *. It's a visual cue only: put required on the control too.
Preview
Installation
FAQ
How is the asterisk marked up?
A span with className="text-destructive" and the character *, after the word Email, inside the Label. There is a space between Email and the span.
Where does the asterisk sit?
On the same line, after the caption. Label is a flex row with gap-2, so the span follows Email.
Where does the red come from?
text-destructive on the span only. The word Email keeps the label's text color. The label itself has no color class.
Does the asterisk mark a field required?
No. The file has no input. The asterisk is visual. Put required on the input as well, or the field is not required to the browser.
Related
- Label with Optional IndicatorA label with a muted (optional) marker
- Error LabelA label in the destructive color with an
- Label with DescriptionA label with a line of muted helper text
- Input with LabelA text input with a label above it
- Required Field Validation FormA name and an email field marked with
- Label with BadgeA label with a secondary badge that marks