Label
A label component for form controls and other UI elements. Built on Radix UI primitives with built-in styling for disabled states and peer interactions. Essential for form accessibility.
Installation
Import
Usage
Use Label to associate text with form controls for accessibility. Always use htmlFor to link labels with their inputs. Labels are automatically styled for disabled states and peer interactions. Use descriptive label text that clearly identifies the form field.
Design Guidelines
Maintain consistent label styling throughout your application. Use appropriate font sizes and weights. Position labels consistently (above inputs is recommended). Include required indicators when needed. Keep label text concise but descriptive.
Basic Usage
Label associated with an input
With Checkbox
Label associated with a checkbox
With Switch
Label associated with a switch
Form Labels
Multiple labels in a form
Required Fields
Labels with required indicator
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
htmlFor | string | — | ID of the form control this label is associated with |
children | React.ReactNode | — | Label text content |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
Accessibility
Accessibility features and considerations
Labels are essential for form accessibility. Always associate labels with form controls using htmlFor/id. Screen readers use labels to announce form fields. Labels automatically handle disabled state styling. Use clear, descriptive text that makes sense out of context.