# Status select (goodtabs UI)

A select whose options carry a monochrome icon in the trigger and in the list.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/status-select.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/status-select`

## Usage

```tsx
import { StatusSelect } from "@/components/ui/status-select"

<StatusSelect defaultValue="in-progress" onValueChange={setStatus} aria-label="Status" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options | `{ value: string; label: string; icon: ComponentType<{ className?: string }> }[]` | `issueStatusOptions` | The options, in list order. Defaults to Backlog, In progress, Done and Cancelled. |
| value, defaultValue, onValueChange | `radix Select props` |  | Controlled or uncontrolled, as in shadcn select. |
| placeholder | `string` | `"Status"` | Text shown before a value is chosen. |
| size | `"sm" | "default"` | `"default"` | Trigger height: 28px or 32px. |

## When to use

- To set the state of an issue, task, order or deploy from a short fixed list
- In table rows and detail headers where the icon makes the value scannable
- For any single choice where each option has a natural glyph, such as priority

## When not to use

- For long lists or ones that need search, use a combobox
- For options without a meaningful icon, use the grouped select
- For picking several values at once, use a filter menu

## Notes for agents

- options defaults to the exported issueStatusOptions; pass your own array to replace it
- Each icon is a component, not an element: pass CircleIcon, not <CircleIcon />
- Icons stay monochrome by design; do not colour them per state
- Give the trigger an aria-label or a Label with htmlFor and an id, since the placeholder alone is not a name

Docs: https://ui.goodtabs.co/components/status-select