Label

Renders an accessible label associated with controls.

With Input

import { Input } from '@immit/ui/input'
import { Label } from '@immit/ui/label'
 
export function LabelWithInput() {
  return (
    <div className="grid w-full gap-1">
      <Label htmlFor="email">Email</Label>
      <Input type="email" placeholder="Enter an email" />
    </div>
  )
}

With Checkbox

Accept terms and conditions

import { Checkbox } from '@immit/ui/checkbox'
import { Label } from '@immit/ui/label'
 
export function LabelWithCheckbox() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  )
}