Label Primitive

Headless, unstyled label primitive with full accessibility support.

Basic Headless Primitive

The primitive provides semantic HTML label element without styling.

Basic label

Click the label to focus the input field.

Labels work with all form input types.

Text Input

Select Dropdown

Textarea

Checkbox Label (clickable)

Radio Label (clickable)

Common pattern for showing required fields.

Username *

Nickname (optional)

Built-in accessibility features following WAI-ARIA design patterns.

✓ Semantic HTML: Uses native <label> element for proper semantics

✓ Form association: for attribute automatically links label to input

✓ Click target: Clicking label focuses associated input

✓ Screen reader support: Screen readers announce label text when input is focused

✓ No JavaScript required: All functionality is native browser behavior

Navigate forms using keyboard.

Navigate between inputs Tab

Click label to focus input Click

Component properties and parameters.

For

Type: string?
The ID of the form element this label is associated with. Maps to the HTML for attribute.

ChildContent

Type: RenderFragment?
The content to be rendered inside the label element (label text).

Additional Attributes

Any additional attributes (class, style, etc.) are passed to the label element.

Choose between primitives and styled components based on your needs.