# Shadcn Clear Button

> Select with clear button

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

## Best for

An X in the trigger that empties a controlled framework pick, taking the chevron's place once a value is set

## Agent notes

- `handleClear` hangs on a `div` with a button role but no tab stop or key handler, so only a pointer can reset the pick

## When not to use

- A reset control paired with an up and down arrow while the field is empty: use [Custom Chevrons](https://reui.io/components/select/c-select-22.md) (`get_example("c-select-22")`)

## Install

```bash
npx shadcn@latest add @reui/c-select-21
```

## About Shadcn Select

### When to use

- Form fields that pick one value from a short fixed list, such as a fruit, timezone, country or size
- Pickers whose options carry a status dot, badge, avatar, flag, icon or one line description
- Toolbar filters and property pickers, such as status, priority, access level or assignee

### When not to use

- A long list the user wants to search by typing part of a name: use [Combobox](https://reui.io/components/combobox.md) (`get_component("combobox")`)
- A plain form field that should open the phone or browser's own picker: use [Native Select](https://reui.io/components/native-select.md) (`get_component("native-select")`)
- Options nested in levels, such as a category and then its subcategories: use [Cascader](https://reui.io/components/cascader.md) (`get_component("cascader")`)

### Agent notes

- Pass `alignItemWithTrigger` false on the base twin or `position` popper on radix to open the list below the trigger, not over it
- With no children, base `SelectValue` prints a string value raw unless `Select` gets `items`; radix `SelectValue` mirrors the chosen `SelectItem`
- Base `SelectItem` can take a whole object as `value`, matched to `defaultValue` by reference; radix values must be non-empty strings

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.