Label

Installation

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

bun add @base-ui/react

Or use the CLI:

npx shadcn@latest add label

For form fields, use the Field component which includes built-in label, description, and error handling.

Usage

import { Label } from "@/components/ui/label"

<Label htmlFor="email">Your email address</Label>

Component API

An accessible label component built on Radix UI. Props:

htmlFor - Associates label with form control
className - Additional CSS classes
All standard HTML label attributes

Examples

Basic

A simple label with an input:

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelDemo() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
    </div>
  )
}

With Description

Combine label with a description:

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelWithDescription() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
      <p className="text-sm text-muted-foreground">
        Enter your email address
      </p>
    </div>
  )
}

Required

Indicate required fields:

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function RequiredLabel() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="username">
        Username <span className="text-destructive">*</span>
      </Label>
      <Input id="username" placeholder="Username" required />
    </div>
  )
}

With Checkbox

Use with checkboxes:

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export function CheckboxWithLabel() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">
        Accept terms and conditions
      </Label>
    </div>
  )
}

With Radio

Use with radio buttons:

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export function RadioWithLabel() {
  return (
    <RadioGroup defaultValue="option-one">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-one" id="option-one" />
        <Label htmlFor="option-one">Option One</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-two" id="option-two" />
        <Label htmlFor="option-two">Option Two</Label>
      </div>
    </RadioGroup>
  )
}

With Switch

Use with switches:

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

export function SwitchWithLabel() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  )
}

Disabled State

Label for disabled inputs:

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function DisabledLabel() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5 opacity-50">
      <Label htmlFor="disabled-input">Disabled Input</Label>
      <Input id="disabled-input" placeholder="Can't type here" disabled />
    </div>
  )
}

Error State

Label for inputs with errors:

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function ErrorLabel() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="error-input" className="text-destructive">
        Email
      </Label>
      <Input
        id="error-input"
        type="email"
        placeholder="Email"
        aria-invalid
      />
      <p className="text-sm text-destructive">
        Please enter a valid email address.
      </p>
    </div>
  )
}

Form Field

For complex forms, use the Field component:

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldExample() {
  return (
    <Field>
      <FieldLabel>Email address</FieldLabel>
      <Input type="email" placeholder="you@example.com" />
      <FieldDescription>
        We'll never share your email with anyone else.
      </FieldDescription>
      <FieldError />
    </Field>
  )
}

With Icons

Combine labels with icons:

import { Mail } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelWithIcon() {
  return (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email" className="flex items-center gap-2">
        <Mail className="h-4 w-4" />
        Email
      </Label>
      <Input type="email" id="email" placeholder="Email" />
    </div>
  )
}

Accessibility

Built on Radix UI Label for accessibility
Proper label association with form controls
Click label to focus input
Screen reader compatible
ARIA attributes automatically applied

API Reference

See the Base UI Label documentation for complete API details.

​Installation

​Usage

​Component API

​Label

​Examples

​Basic

​With Description

​Required

​With Checkbox

​With Radio

​With Switch

​Disabled State

​Error State

​Form Field

​With Icons

​Accessibility

​API Reference

Installation

Usage

Component API

Label

Examples

Basic

With Description

Required

With Checkbox

With Radio

With Switch

Disabled State

Error State

Form Field

With Icons

Accessibility

API Reference