Label
Label Primitive
Headless, unstyled label primitive with full accessibility support.
Basic Headless Primitive
The primitive provides semantic HTML <label> behavior without styling.
Click the label to focus the input field.
Behavior
Clicking the label focuses the associated input via the
for attribute.With Form Elements
Labels work with all standard form input types.
Required Fields
Common labeling pattern for required and optional fields.
Accessibility Features
Built-in accessibility support follows WAI-ARIA patterns.
Included by default
Semantic label element, automatic form association, click-to-focus behavior, and screen reader friendly labeling.
Keyboard Shortcuts
Navigate forms using keyboard.
Navigate between inputs
Tab
Click label to focus input
Click
When to Use Primitives
Choose between primitives and styled components based on your needs.
Use Label Primitive
- ✓ Building a custom design system
- ✓ Need complete control over styling
- ✓ Want to apply your own CSS framework
- ✓ Creating unique visual designs
Use Styled Component
- ● Want shadcn/ui design out of the box
- ● Need quick implementation
- ● Like the default styling
- ● Prefer convention over configuration
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| For | string? | — | The ID of the form element this label is associated with. Maps to the HTML for attribute. |
| ChildContent | RenderFragment? | — | Content rendered inside the label element. |
| AdditionalAttributes | IReadOnlyDictionary<string, object>? | — | Additional attributes (such as class or style) passed to the label element. |