Component

Label

Accessible label for form controls. Pairs with any input via htmlFor, or wraps the control directly. For full form fields with description and error handling, prefer Field + FieldLabel instead.

htmlForassociates label with a control by id

data-disableddims label when the control is disabled

Playground

Email address

Text— text

Paired control— control

Disabled— disabled

Basic — paired with an input

Username

With checkbox

Accept terms and conditionsReceive marketing emails

With switch

Push notificationsSound effects

With radio group

Monthly billingAnnual billing — save 20%

With textarea

Bio

Required indicator

Full name *

Disabled state

ancestor with data-disabled dims the label text

Username

wrapping a disabled checkbox

Accept terms and conditions

RTL support

قبول الشروط والأحكام

Tokens used

2 semantic tokens consumed by this component.

--foregroundForeground

text-foreground

--muted-foregroundMuted Foreground

text-muted-foreground