> ## Documentation Index > Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt > Use this file to discover all available pages before exploring further. # Checkbox > A binary selection control for checking or unchecking an option — supports labels, descriptions, indeterminate state, and groups. ## Overview
Unchecked
Checked
Indeterminate
Disabled
Disabled checked
**Checkbox** allows users to select one or more items from a list, or toggle a single setting on or off. It supports labels, descriptions, disabled states, and an indeterminate state for "select all" patterns. *** ## Installation ```bash npm theme={null} npm install @araf-ds/core ``` ```bash yarn theme={null} yarn add @araf-ds/core ``` ```bash pnpm theme={null} pnpm add @araf-ds/core ``` *** ## Usage ```tsx theme={null} import { Checkbox } from "@araf-ds/core" export default function Example() { return ( ) } ``` *** ## Variants ### Basic
Accept terms and conditions
```tsx theme={null} ``` ### Checked
Subscribe to newsletter
```tsx theme={null} ``` ### With Description
Enable notifications
Receive email updates about your account activity.
```tsx theme={null} ``` ### Disabled
Admin access
Super admin
```tsx theme={null} ``` ### Indeterminate (Select All) Use the indeterminate state to represent a "select all" parent checkbox when only some children are selected.
Select all
Design
Engineering
Product
```tsx theme={null} const [items, setItems] = useState([true, false, false]); const allChecked = items.every(Boolean); const someChecked = items.some(Boolean) && !allChecked; setItems(items.map(() => !!checked))} label="Select all" /> ``` *** ## Checkbox Group Pattern
{["Design","Engineering","Product"].map((opt, i) => (
{i===0 && }
{opt}
))}
```tsx theme={null} const options = ["Design", "Engineering", "Product"]; const [selected, setSelected] = useState(["Design"]); const toggle = (val: string) => setSelected((prev) => prev.includes(val) ? prev.filter((v) => v !== val) : [...prev, val] );
{options.map((opt) => ( toggle(opt)} /> ))}
``` *** ## API Reference Controlled checked state. Use `"indeterminate"` to show a dash/mixed state. Uncontrolled initial checked state. Callback fired when the checked state changes. Label text displayed next to the checkbox. Supporting description shown below the label. Disables the checkbox and applies the disabled visual style. HTML `id` for associating a custom ` Additional Tailwind classes for custom overrides. *** ## Accessibility * Checkbox uses a native `` element for full keyboard and screen reader support * Label is associated via `htmlFor` / `id` — clicking the label also toggles the checkbox * `description` is linked via `aria-describedby` so screen readers announce it after the label * `disabled` uses the native `disabled` attribute, removing the element from tab order * Indeterminate state is set via `aria-checked="mixed"` — screen readers will announce "mixed" * Focus ring (`0 0 0 4px #CDE4F5`) meets WCAG 2.1 AA contrast requirements *** ## Do's & Don'ts * Use checkbox for multi-select or toggleable settings * Always provide a visible label — never a checkbox alone * Use the indeterminate state for "select all" parent checkboxes * Group related checkboxes under a clear section heading * Don't use checkbox for exclusive single-selection — use Radio Group instead * Don't use checkbox for immediate actions — use Switch instead * Don't stack more than 8 checkboxes without grouping or filtering * Don't disable without explaining why in nearby helper text