# Shadcn Checkbox Settings

> Collapsible with checkbox settings

- Type: example, free and open source (MIT)
- Component: [Collapsible](https://reui.io/components/collapsible.md)
- Page: https://reui.io/components/collapsible/c-collapsible-2
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/collapsible.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/collapsible.md
- MCP: `get_example("c-collapsible-2")`
- Registry item: https://reui.io/r/styles/base-nova/c-collapsible-2.json
- Uses: Button, Card, Checkbox, Collapsible, Field

## Best for

A full-width outline button that opens a card of 3 notification channel checkboxes, starting open

## Agent notes

- Replace `settings` with your channels; each `Checkbox` takes only `defaultChecked`, so no choice is read or saved yet

## Install

```bash
npx shadcn@latest add @reui/c-collapsible-2
```

## About Shadcn Collapsible

### When to use

- Cards and panels that hold back secondary detail, such as order items, a usage breakdown or a profile
- Optional settings, advanced form fields and single help answers kept closed until asked for
- Nested navigation menus and file trees, built by placing one collapsible inside another

### When not to use

- Several stacked sections that open and close as one group, often one at a time: use [Accordion](https://reui.io/components/accordion.md) (`get_component("accordion")`)
- A large folder hierarchy that people move through and expand with arrow keys: use [Tree](https://reui.io/components/tree.md) (`get_component("tree")`)
- A complete account or workspace configuration page of grouped switch rows: use the [Settings blocks](https://reui.io/blocks/application/settings.md)

### Agent notes

- Base UI parts flag open state with `data-open` on root and panel and `data-panel-open` on the trigger, while Radix parts set a state attribute
- A closed `CollapsibleContent` renders none of its children in either twin, so that text is missing from the server HTML
- Base UI `CollapsibleTrigger` swaps its element through `render` and the Radix one through `asChild`; each reads only its own prop

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.