---
title: Label
description: Renders an accessible label associated with form controls
links:
  rac: TextField
  source: label/label.tsx
  styles: label.css
---

## Usage

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

<ComponentPreview
  name="label-basic"
/>

## Examples

### With Required Indicator

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

### With Disabled State

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

### With Invalid State

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

## Customization

### Tailwind CSS

<ComponentPreview name="label-custom-styles" />

### Global CSS

To customize the Label component classes, you can use the `@layer components` directive. [Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).

```css
@layer components {
  .label {
    @apply font-semibold text-foreground;
  }

  .label--required::after {
    @apply text-accent;
  }
}
```

## Styling Reference

HeroUI follows the [BEM](https://getbem.com/) methodology to ensure component variants and states are reusable and easy to customize.

### CSS Classes

The Label component uses these CSS classes ([View source styles](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/label.css)):

#### Base Classes [!toc]

- `.label` - Base label styles with text styling

#### State Modifier Classes [!toc]

- `.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.

## API Reference

### Label

| 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)) 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

## Related Components

<RelatedComponents component="label" />
