Label

Import

import { Label } from '@heroui/react';

Usage

API

Label Props

Prop	Type	Default	Description
htmlFor	string	-	The id of the element the label is associated with
isRequired	boolean	false	Whether to display a required indicator
isDisabled	boolean	false	Whether the label is in a disabled state
isInvalid	boolean	false	Whether the label is in an invalid state
className	string	-	Additional CSS classes
children	ReactNode	-	The content of the label

Accessibility

The Label component is built on the native HTML <label> element (MDN Reference) and follows WAI-ARIA best practices:

• Associates with form controls using the htmlFor attribute
• Provides semantic HTML <label> element
• Supports keyboard navigation when associated with form controls
• Communicates required and invalid states to screen readers
• Clicking the label focuses/activates the associated form control

Styling

CSS Classes

The Label component uses these CSS classes (View source styles):

Base Classes

• .label - Base label styles with text styling

State Modifier Classes

• .label--required or [data-required="true"] > .label - Shows required asterisk indicator
• .label--disabled or [data-disabled="true"] .label - Disabled state styling
• .label--invalid or [data-invalid="true"] .label or [aria-invalid="true"] .label - Invalid state styling (danger/red text color)

Note: The required asterisk is smartly applied using role and data-slot detection. It excludes:

• Elements with role="group", role="radiogroup", or role="checkboxgroup"
• Elements with data-slot="radio" or data-slot="checkbox"

This prevents duplicate asterisks when using group components with required fields.

Examples

With Required Indicator

<Label htmlFor="email" isRequired>
  Email Address
</Label>
<Input id="email" type="email" />

With Disabled State

<Label htmlFor="username" isDisabled>
  Username
</Label>
<Input id="username" isDisabled />

With Invalid State

<Label htmlFor="password" isInvalid>
  Password
</Label>
<Input id="password" isInvalid />