Label

An accessible label associated with controls.

Accept terms and conditions

Installation

Add the label component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/label.json

Usage

tsx

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

Examples

Default

Accept terms and conditions

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

<div className="flex items-center gap-2">
  <Checkbox id="terms" defaultChecked />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>