Ethereal Garden

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

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

With Required Indicator

A label with a required field indicator.

Form Layout

Labels in a complete form layout with various input types.

Props

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