Label
Accessible form label that points at any control by its id, so clicking it focuses or toggles the control, with consistent typography across forms.
import { Label } from "@plexui/ui/components/Label";For stacked form fields, prefer Field: it bundles label, description, and error handling. Reach for a standalone Label when you pair it directly with a checkbox, switch, or any control where Field's layout is overkill.
Examples
Overview
Label in Field
Payment Method
All transactions are secure and encrypted
Enter your 16-digit card number
MM
YYYY
Billing Address
The billing address associated with your payment method
API
Label
| Prop | Type | Default | Description |
|---|---|---|---|
htmlFor | string | — | id of the associated control. Clicks on the label focus or activate the control. |
className | string | — | Applied to the root <label> element |
Built on Radix Label, which prevents double-click text selection and forwards clicks to the associated control. All other <label> attributes are forwarded.
Styling
Component tokens:
--label-color: text color (defaults to--color-text)--label-font-size: text size (defaults to--font-text-sm-size)--label-font-weight: weight (defaults to--font-weight-medium)--label-line-height: line height (defaults to1)