Checkbox

A control that allows the user to toggle between checked and not checked.

With Label

Accept terms and conditions

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

Variants

import { Checkbox } from '@immit/ui/checkbox'
 
export function CheckboxVariants() {
  return (
    <div className="flex space-x-2">
      <Checkbox defaultChecked variant="default" />
      <Checkbox defaultChecked variant="primary" />
      <Checkbox defaultChecked variant="destructive" />
      <Checkbox defaultChecked variant="warning" />
      <Checkbox defaultChecked variant="success" />
    </div>
  )
}

Sizes

import { Checkbox } from '@immit/ui/checkbox'
 
export function CheckboxSizes() {
  return (
    <div className="flex space-x-2">
      <Checkbox defaultChecked size="sm" />
      <Checkbox defaultChecked size="default" />
      <Checkbox defaultChecked size="lg" />
    </div>
  )
}