Checkbox

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

Import

import { Checkbox } from '@chimera-ui/components'

Simple Usage

Accept terms and conditions

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <label
    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
    htmlFor="terms"
  >
    <p>
      Accept terms and conditions
    </p>
  </label>
</div>

Subcomponent Usage

See how the indicator can be customized?

<div className="flex items-center space-x-2">
  <Checkbox.Root className="w-8 h-8">
    <Checkbox.Indicator>
      X
    </Checkbox.Indicator>
  </Checkbox.Root>
  <label>
    See how the indicator can be customized?
  </label>
</div>

Button Collapsible