Label
An accessible label component for form controls built on Radix UI Label.
Import
import { Label } from "@retents/ui/label"Usage Guidelines
When to use
- To label every form control (Input, Textarea, Select, Checkbox, etc.) for accessibility.
- When the label should be visually visible and clickable to focus the associated control.
When NOT to use
- For descriptive helper text below a form field — use the
FormDescriptionsub-component from Form instead. - For non-form content headings — use a heading element (
h2,h3, etc.) instead.
Accessibility
Always connect a Label to its control via matching htmlFor and id attributes. The Label automatically dims when its associated control is disabled via the peer-disabled utility.
Preview
Features
- Built on Radix UI Label primitive for proper accessibility
- Automatically associates with the labeled form control
- Disabled styling when the associated control is disabled (
peer-disabled)