# Shadcn Avatar Card

> Avatar based card checkbox

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

## Best for

A person card with avatar, name and handle, the box sitting at its trailing edge

## Agent notes

- `AvatarImage` loads a remote Unsplash photo of a sample person; point it at your user's avatar and put their initials in `AvatarFallback`

## When not to use

- Picking exactly 1 person, such as a single assignee or owner: use [Radio Group](https://reui.io/components/radio-group.md) (`get_component("radio-group")`)

## Install

```bash
npx shadcn@latest add @reui/c-checkbox-15
```

## About Shadcn Checkbox

### When to use

- Consent and opt-in fields, such as accepting terms or turning on a feature
- Lists where any number of options can be ticked, like notification channels or permissions
- Selectable cards and tiles for modules, people or a saved payment card

### When not to use

- A choice where exactly 1 option of a set may be picked: use [Radio Group](https://reui.io/components/radio-group.md) (`get_component("radio-group")`)
- An on or off setting that applies the moment it is flipped: use [Switch](https://reui.io/components/switch.md) (`get_component("switch")`)
- A complete record entry page with many field types and a submit handler: use the [Form blocks](https://reui.io/blocks/application/form.md)

### Agent notes

- No example passes a name to `Checkbox`, so a native submit sends none of these boxes; give each one a name inside a real form
- The base twin sets the mixed state with the `indeterminate` prop; the radix twin passes `checked` as the string indeterminate
- A mixed state draws the same `CheckIcon` as a ticked box, as the indicator has no minus icon; add one in `Checkbox` to show a dash

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.