Shadcn Label
React label for inputs, checkboxes, and form controls. Built with TypeScript and Tailwind CSS for Next.js using Base UI — click the text to focus the control.
A label is the name of a control. Click it and the associated input, checkbox, or switch focuses. Use htmlFor when the control is a sibling; wrap the control when the whole row should be the target.
Looking for a neobrutalism version for shadcn?
Same label, thicker borders. The NeoBrutalism label is the kit if you want that look.
Usage
import { Label } from "@/components/ui/label"<Label htmlFor="email">Your email address</Label>htmlFor must match the control's id. Click the label, the control focuses.
For a form field, use Field — label, description, and error in one.
Composition
RTL
Wrap with DirectionProvider and dir="rtl". The checkbox stays on the start edge.
API
Prop
Type
peer-disabled and group-data-[disabled=true] dim the label. There is no disabled prop.
Notes
A form field wants Field
For a labeled input with description and error, use Field (FieldLabel, FieldDescription, FieldError). This Label is the primitive FieldLabel wraps.
htmlFor and the control's id must be the same string.
With other components
Label, description, and error
InputName the text field
CheckboxClick the words
Radio GroupOne label per option
SwitchSettings row caption
TextareaName the long field
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Kbd
React kbd for shortcut keycaps in menus and tooltips. Built with TypeScript and Tailwind CSS for Next.js using Base UI — grouped keys that never steal clicks.
Markdown
React markdown for assistant replies and docs snippets. Built with TypeScript and Tailwind CSS for Next.js using Base UI — Streamdown, tables, and fenced code.