Checkbox

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

Example

Anatomy

<Checkbox>
  <CheckIcon />
</Checkbox>

Usage

import { Checkbox } from '@ivaldi/ui'
<div className="flex items-center space-x-2">
  <Checkbox id="terms">
    <CheckIcon className="size-4" />
  </Checkbox>
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

<form>
  <div className="flex flex-col space-y-2">
    <div className="flex items-center space-x-2">
      <Checkbox id="email-notifications" defaultChecked>
        <CheckIcon className="size-4" />
      </Checkbox>
      <Label htmlFor="email-notifications">Email notifications</Label>
    </div>
    <div className="flex items-center space-x-2">
      <Checkbox id="marketing" disabled>
        <CheckIcon className="size-4" />
      </Checkbox>
      <Label htmlFor="marketing">Marketing emails</Label>
    </div>
  </div>
</form>

Checkbox Props

Checkbox component built on Radix UI Checkbox primitive Supports different sizes and states with custom styling

PropTypeDefault