Label

Renders an accessible label associated with controls

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

Billing Address

The billing address associated with your payment method

API

Label

PropTypeDefaultDescription
htmlForstringid of the associated control. Clicks on the label focus or activate the control.
classNamestringApplied to the root <label> element

Built on Radix Label — 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 to 1)