Forms

Checkbox

Binary choice with an indicator.

Import

tsx

import { Checkbox } from "@cronus-ui/ui";

bash

npx cronus-ui add checkbox

Examples

Default

A controlled checkbox with an associated Label.

Accept terms & conditions

tsx

function CheckboxDemo() {
  const [checked, setChecked] = useState(true);

  return (
    <div className="flex items-center gap-3">
      <Checkbox
        id="terms"
        checked={checked}
        onCheckedChange={(value) => setChecked(value === true)}
      />
      <Label htmlFor="terms">Accept terms &amp; conditions</Label>
    </div>
  );
}

Disabled

A non-interactive checkbox.

Unavailable option

tsx

<div className="flex items-center gap-3">
  <Checkbox id="disabled" disabled />
  <Label htmlFor="disabled">Unavailable option</Label>
</div>