Checkbox

import { Checkbox } from '@arbol-ai/ui';

<Checkbox defaultSelected description="Only about this appointment.">
  Send reminders by WhatsApp
</Checkbox>

import { Checkbox, CheckboxGroup } from '@arbol-ai/ui';

<CheckboxGroup defaultValue={['whatsapp']} description="We try them in this order." label="Channels">
  <Checkbox value="whatsapp">WhatsApp</Checkbox>
  <Checkbox value="voice">Phone call</Checkbox>
  <Checkbox value="email">Email</Checkbox>
</CheckboxGroup>

import { useState } from 'react';
import { Checkbox, CheckboxGroup } from '@arbol-ai/ui';

const CONTACTS = ['Ana Torres', 'Luis Gómez', 'Marta Ruiz'];

const SelectAllExample = () => {
  const [selected, setSelected] = useState(['Ana Torres']);
  return (
    <div className="grid gap-2">
      <Checkbox
        isIndeterminate={selected.length > 0 && selected.length < CONTACTS.length}
        isSelected={selected.length === CONTACTS.length}
        onChange={(isSelected) => {
          setSelected(isSelected ? CONTACTS : []);
        }}
      >
        All contacts
      </Checkbox>
      <CheckboxGroup aria-label="Contacts" className="ps-6" onChange={setSelected} value={selected}>
        {CONTACTS.map((contact) => (
          <Checkbox key={contact} value={contact}>
            {contact}
          </Checkbox>
        ))}
      </CheckboxGroup>
    </div>
  );
};

<SelectAllExample />