Components
Label
Renders an accessible label associated with controls.
Loading
Installation
pnpm dlx shadcn@latest add @toui/label
Pattern
Tokens
3 CSS variables in 3 categories.
text
| CSS Variable | Value | Description |
|---|---|---|
--label-text | var(--component-text-sm) | 12px — default label size |
helper-text
| CSS Variable | Value | Description |
|---|---|---|
--label-helper-text | var(--component-text-xs) | 10px — helper/description text |
gap
| CSS Variable | Value | Description |
|---|---|---|
--label-gap | var(--component-gap-xs) | Gap between label and required indicator |
API Reference
This component is built using the Radix UI Label primitive and includes the following custom props:
Label
The main container component that provides context and styling for all card elements.
| Prop | Type | Default |
|---|---|---|
variant |
Credits
- Built with Radix UI Label.