Label
An accessible form label component with support for required fields and additional context. Built on Radix UI Label primitive.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Label component
Copy this code to create your Label component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
With Asterisk
Labels can include an asterisk to indicate required fields.
With Sublabel
Labels can include a sublabel to provide additional context or instructions.
Disabled State
Labels can be disabled to match disabled form controls.
Complete Example
A complete example showing all Label features together.
API Reference
The Label component is built on top of the Radix UI Label primitive and extends its functionality with additional styling options and features.
Label.Root
The main label component that provides accessible labeling for form controls.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | "boolean" | "false" | When true, applies disabled styling to the label. |
htmlFor | "string" | "undefined" | The id of the element the label is associated with. |
className | "string" | "undefined" | Additional CSS classes to apply to the label. |
Label.Asterisk
A component to display an asterisk or other indicator for required fields.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the asterisk. |
children | "ReactNode" | "*" | The content to display as the asterisk. Defaults to '*'. |
Label.Sub
A component to display additional descriptive text below the main label.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the sublabel. |
children | "ReactNode" | "undefined" | The content to display as the sublabel. |