Newsletter
Subscribe to our newsletter to get the latest updates.
Formsstable
Label
An accessible label component that renders a caption associated with a control, built on Radix UI Label primitive.
Installation
Install the component directly into your project using the Pittaya CLI.
npx pittaya@latest add label
When to use
Use the Label component to provide accessible, descriptive text for form controls. Labels are essential for accessibility, helping users understand what information is expected in form fields.
The component is built on Radix UI's Label primitive, ensuring proper semantic HTML and accessibility features like automatic focus behavior when clicking the label.
Best practices
- Always associate labels with their corresponding form controls using the
htmlForattribute matching the input'sid. - Keep label text concise and descriptive, clearly indicating what input is expected.
- Place labels above or to the left of form fields for optimal readability and accessibility.
- Use the Label component even for custom form controls to maintain accessibility standards.
- Combine with helper text or error messages below the input for additional context.
- Avoid using placeholder text as a replacement for labels, as it disappears when users start typing.
Accessibility
The Label component is built with accessibility as a priority, leveraging Radix UI's Label primitive for optimal support.
- Automatically focuses associated form controls when the label is clicked, improving usability.
- Properly implements
forattribute to create semantic relationships with form controls. - Supports
peer-disabledstyling to visually indicate when the associated control is disabled. - Works seamlessly with screen readers, announcing the label text when users navigate to the associated control.
- Includes
select-noneto prevent accidental text selection, improving the user experience.
Examples
Combine variants and sizes to meet your needs.
Basic usage
A simple label associated with an input field using the htmlFor attribute.
With helper text
Label combined with helper text to provide additional context to users.
Required field
Label with a visual indicator for required fields using an asterisk.
Disabled state
Label automatically adjusts opacity when the associated control is disabled.
Form group
Multiple labels and inputs organized in a complete form layout.
With icon
Label with an icon for enhanced visual communication and better user experience.
Properties
TSX interface that combines variants and default attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
htmlFor | string | — | The id of the form control this label is associated with. Creates an accessible relationship between label and control. |
className | string | — | Additional CSS classes to customize the label appearance. |
children | React.ReactNode | — | The label text or content to display. |