Checkbox

const [checked, setChecked] = useState(false);

{/* Sizes */}
<Checkbox size="sm" checked={checked} onCheckedChange={setChecked} />
<Checkbox size="md" checked={checked} onCheckedChange={setChecked} />

{/* Disabled */}
<Checkbox size="md" checked disabled />
<Checkbox size="md" disabled />

const [checked, setChecked] = useState(false);

{/* Labeled Checkbox (flex layout) */}
<Checkbox label="Accept terms and conditions" checked={checked} onCheckedChange={setChecked} />
<Checkbox label="Disabled option with label" checked disabled />

const FRUITS = ["Apple", "Banana", "Cherry"];
const [selected, setSelected] = useState(["Banana"]);

<CheckboxGroup>
  {FRUITS.map((fruit) => (
    <CheckboxGroupItem
      key={fruit}
      label={fruit}
      checked={selected.includes(fruit)}
      onCheckedChange={(checked) =>
        toggle(selected, setSelected, fruit, checked)
      }
    />
  ))}
</CheckboxGroup>

const FRUITS = ["Apple", "Banana", "Cherry"];
const [cards, setCards] = useState(["Apple"]);

<CheckboxCards className="w-full">
  {FRUITS.map((fruit) => (
    <CheckboxCardsItem
      key={fruit}
      checked={cards.includes(fruit)}
      onCheckedChange={(checked) =>
        toggle(cards, setCards, fruit, checked)
      }
    >
      {fruit}
    </CheckboxCardsItem>
  ))}
</CheckboxCards>