Checkbox

pnpm add @tessinaui/ui

import { Checkbox, CheckboxGroup } from "@tessinaui/ui";

{/* Standalone */}
<Checkbox label="Accept terms and conditions" />

{/* Controlled */}
<Checkbox
  checked={accepted}
  onCheckedChange={(val) => setAccepted(val as boolean)}
  label="Accept terms"
/>

{/* With description and error */}
<Checkbox
  label="Accept terms"
  required
  intent="error"
  errorMessage="You must accept the terms to continue."
/>

{/* Group with select-all */}
<CheckboxGroup
  value={selected}
  onValueChange={setSelected}
  allValues={["a", "b", "c"]}
  label="Choose options"
>
  <Checkbox name="a" value="a" label="Option A" />
  <Checkbox name="b" value="b" label="Option B" />
  <Checkbox name="c" value="c" label="Option C" />
</CheckboxGroup>

<CheckboxGroup defaultValue={["email"]} label="Notifications">
  <Checkbox name="email"  value="email"  label="Email" />
  <Checkbox name="sms"    value="sms"    label="SMS" />
  <Checkbox name="push"   value="push"   label="Push" />
</CheckboxGroup>

const all = ["a", "b", "c"];
const [selected, setSelected] = useState<string[]>([]);

<CheckboxGroup value={selected} onValueChange={setSelected} allValues={all}>
  <Checkbox
    name="all"
    parent
    label="Select all"
    checked={selected.length === all.length}
    indeterminate={selected.length > 0 && selected.length < all.length}
    onCheckedChange={(checked) => setSelected(checked ? [...all] : [])}
  />
  {all.map((v) => (
    <Checkbox key={v} name={v} value={v} label={v} />
  ))}
</CheckboxGroup>

<CheckboxGroup orientation="horizontal" label="Days">
  <Checkbox value="mon" label="Mon" />
  <Checkbox value="tue" label="Tue" />
  <Checkbox value="wed" label="Wed" />
</CheckboxGroup>