Label
Accessible form labels for React and Next.js applications. Built with Radix UI and styled with Tailwind CSS for perfect shadcn/ui integration.
You know how annoying it is when you click a form and have no idea what to type? Labels fix that. This component does all the accessibility magic so you don't have to think about it.
Basic form label
Clean, accessible labeling for any form control:
Built on Radix UI so the accessibility stuff just works. Pairs perfectly with all the other shadcn/ui form components.
npx shadcn@latest add labelWhy you actually need these
Ever tried using a form with a screen reader? It's a nightmare without proper labels. But even regular users get confused when they don't know what goes where.
Here's a nice bonus: when you click the label, it automatically focuses the input. That little detail makes your forms feel way more polished.
Essential label patterns
Checkbox with label
Much easier to hit the label than that tiny checkbox:
Input with label
The classic input-label combo:
Radio group labels
Each radio option gets its own clickable label:
Required field indicators
Red asterisk so people know what's required:
Textarea labeling
Works with textareas too:
Just works with your React setup
Throw these into any form - React Hook Form, Formik, whatever you're using. The htmlFor prop connects everything automatically and handles all the screen reader stuff for you.
API Reference
Label
A semantic label element with built-in accessibility features.
| Prop | Type | Default | Description |
|---|---|---|---|
htmlFor | string | - | ID of the associated form control |
className | string | - | Additional CSS classes |
children | React.ReactNode | - | Label text and content |
Accessibility Features
| Feature | Implementation |
|---|---|
| Semantic HTML | Uses proper <label> element |
| Form Association | Connects to controls via htmlFor |
| Click Behavior | Clicking label focuses associated input |
| Screen Readers | Properly announces form relationships |
| Keyboard Navigation | Integrates with form tab order |
Style however you want
Add any Tailwind classes to make them fit your design:
<Label className="text-sm font-medium">Small Label</Label>
<Label className="text-lg text-blue-600">Big Blue Label</Label>Common patterns
Required fields - Add visual indicators like asterisks or "required" text.
Optional fields - Mark optional fields when most are required.
Help text - Combine labels with description text for complex fields.
Form sections - Use consistent labeling within grouped form sections.
Write labels that actually help
- Be specific - "Email address" beats just "Email"
- Don't repeat placeholders - If your label says "Email" don't make the placeholder say "Email" too
- Mark required stuff - Red asterisks, "required" text, whatever works for your design
- Keep it scannable - People skim forms looking for what they need
- Test with screen readers - Turn on VoiceOver and make sure it makes sense
Input
A flexible input component built with React and Tailwind CSS. Perfect for forms, search fields, and user data collection in Next.js applications using shadcn/ui components.
Menubar
A horizontal menu bar component for React and Next.js applications. Perfect for desktop-style interfaces with File, Edit, View menus and keyboard shortcuts.