# Shadcn Plan Picker

> Select component with a subscription plan style

- Type: example, free and open source (MIT)
- Component: [Select](https://reui.io/components/select.md)
- Page: https://reui.io/components/select/c-select-6
- 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-6")`
- Registry item: https://reui.io/r/styles/base-nova/c-select-6.json
- Uses: Field, Item, Select

## Best for

A plan picker whose trigger grows to show the chosen plan's name and one line description, built from Item parts

## Agent notes

- Base `itemToStringValue` sets the form value to the plan `name`, since each option's `value` there is the whole plan object

## When not to use

- Plans shown all at once as cards so every description stays in view: use [Radio Group](https://reui.io/components/radio-group.md) (`get_component("radio-group")`)

## Install

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

## 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.