Label

Ready

Accessible form labels with automatic focus handling

Basic Label

Labels paired with form inputs

Label Variants

Different semantic styles

This field has an error

Label Sizes

Different text sizes

Required Fields

Automatic asterisk indicator for required fields

With Different Inputs

Labels work with all form elements

With Disabled Inputs

Labels automatically adapt to disabled inputs

Installation

Install the required dependencies

npm install @radix-ui/react-label

Usage

Basic implementation example

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

export default function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input
        id="email"
        type="email"
        placeholder="you@example.com"
      />
    </div>
  )
}

Props

Label component props

PropTypeDefaultDescription
htmlForstring-ID of associated input
variant'default' | 'muted' | 'error''default'Visual variant
size'sm' | 'md' | 'lg''md'Text size
requiredbooleanfalseShow required asterisk

Features

Built-in functionality

  • Accessible - Proper ARIA attributes and focus handling
  • Click to focus - Clicking label focuses associated input
  • 3 variants - Default, muted, error states
  • 3 sizes - Small, medium, large text
  • Required indicator - Automatic red asterisk
  • Disabled state - Adapts to disabled inputs