Label

A form control label used to associate descriptive text with form inputs.

When To Use

When creating form fields that require associated text labels
To ensure form controls have accessible labels for screen readers
When you need to associate a label with an input component
To provide clear context for form elements

Examples

Basic

Basic#

Email

The basic implementation of a label component associated with an input.

With Required Indicator

With Required Indicator#

Username*

This field is required

Optional field

A label with a required field indicator.

Form Layout

Form Layout#

Labels in a complete form layout with various input types.

Props

Prop	Type	Default
`asChild?`	`boolean`	-
`htmlFor?`	`string`	-
`key?`	`Key \| null`	-
`form?`	`string`	-

Accessibility

The Label component follows the WAI-ARIA label pattern for accessibility:

Uses the native HTML <label> element, ensuring proper association with form controls
Supports the htmlFor attribute to explicitly associate labels with inputs via their IDs
Maintains proper focus states when labels are clicked
Includes appropriate styling for disabled states
Ensures sufficient color contrast for readability

When using the Label component:

Always associate labels with their corresponding form controls
Consider using the required attribute and visual indicators for required fields
Maintain clear, concise text that describes the purpose of the form control

Input OTP

An input component for one-time password authentication codes.

Navigation Menu

A responsive navigation component that provides an accessible way to navigate between pages or sections.