---
title: "Checkbox"
description: "A yes-or-no choice saved with a form, and CheckboxGroup for several options that make one list. Use Switch for settings that apply at once."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkbox

## With a description

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

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

## Group

```tsx
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>
```

## Select all

An indeterminate box says that only some are selected.

```tsx
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 />
```

## Source

The examples above are [`src/components/checkbox/checkbox.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/checkbox/checkbox.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/forms/checkbox/index.mdx