Label

Renders an accessible label associated with controls.

Basic Usage

Default

<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">
    Email
  </Label>
  <Input type="email" id="email" placeholder="Enter your email" />
</div>

With Required Field

Username*

<div className="grid w-full max-w-sm items-center gap-1.5">
  <div className="flex items-center gap-1">
    <Label htmlFor="username">
      Username
    </Label>
    <span className="text-tomato-9 text-sm">
      *
    </span>
  </div>
  <Input type="text" id="username" placeholder="Enter username" required={true} />
</div>

Wrapped Controls

With Checkbox

I agree to the terms and conditions

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms" className="text-sm">
    I agree to the terms and conditions
  </Label>
</div>

With Radio

Option 1

Option 2

<div className="space-y-2">
  <RadioGroup defaultValue="option1" className="space-y-2">
    <div className="flex items-center space-x-2">
      <RadioGroupItem value="option1" id="option1" />
      <Label htmlFor="option1">
        Option 1
      </Label>
    </div>
    <div className="flex items-center space-x-2">
      <RadioGroupItem value="option2" id="option2" />
      <Label htmlFor="option2">
        Option 2
      </Label>
    </div>
  </RadioGroup>
</div>