Label

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

export default function Example() {
  return (
    <>
      {/* Basic label with input */}
      <div className="space-y-2">
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" />
      </div>

      {/* Required field indicator */}
      <div className="space-y-2">
        <Label htmlFor="name" required>Name</Label>
        <Input id="name" />
      </div>

      {/* With checkbox */}
      <div className="flex items-center space-x-2">
        <Checkbox id="terms" />
        <Label htmlFor="terms">Accept terms</Label>
      </div>

      {/* Different variants */}
      <Label variant="default">Default</Label>
      <Label variant="muted">Muted</Label>
      <Label variant="error">Error</Label>

      {/* Different sizes */}
      <Label size="sm">Small</Label>
      <Label size="md">Medium</Label>
      <Label size="lg">Large</Label>
    </>
  )
}