# Select

> A native-feeling single choice from a list (Radix Select): 36px trigger (`size="sm"`: 32px) with a chevron; the list opens in 250ms from 97% (`.t-dropdown`).

## Facts

- **Product**: Max
- **Family**: Forms
- **Global**: `window.DigitalCrew.Select`
- **Source**: `max-agent: src/components/ui/select.tsx`
- **Import in the app**: `import { Select } from "@/components/ui/select";`
- **Live preview**: /design/components/select/preview.html
- **Page**: /design/components/select

## Guidelines

**Use it for** 5–15 known options. Fewer with descriptions: [**RadioGroup**](/design/components/radio-group.md). Long or searchable lists: [**TypedOptionPicker**](/design/components/typed-option-picker.md) or [**Command**](/design/components/command.md).

**What you provide**: `value`/`onValueChange` or `defaultValue`; a `SelectTrigger` (set its width) with `SelectValue` and a placeholder; `SelectContent` with `SelectItem`s (`SelectGroup` + `SelectLabel` to group, `SelectSeparator` between groups). Label the trigger with a [`Label`](/design/components/label.md).

The list sits over the trigger (`position="item-aligned"`); pass `position="popper"` to drop it below instead. Items are 14px, `accent` on focus, a check on the chosen one.

## API

```ts
declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): any;
declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): any;
declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): any;
declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
    size?: "sm" | "default";
}): any;
declare function SelectContent({ className, children, position, align, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): any;
declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): any;
declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): any;
declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): any;
declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): any;
declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): any;
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function Items() {
  return [
    h(DC.SelectItem, { key: 1, value: "draft" }, "Draft"),
    h(DC.SelectItem, { key: 2, value: "active" }, "Active"),
    h(DC.SelectItem, { key: 3, value: "paused" }, "Paused"),
    h(DC.SelectItem, { key: 4, value: "completed" }, "Completed")];
}
function App() {
  return h("div", { className: "flex items-start gap-8" },
    h("div", { className: "flex flex-col gap-2" },
      h(DC.Label, null, "Status"),
      h(DC.Select, { defaultValue: "active", defaultOpen: true },
        h(DC.SelectTrigger, { className: "w-48" }, h(DC.SelectValue, null)),
        h(DC.SelectContent, null, Items()))),
    h("div", { className: "flex flex-col gap-2" },
      h(DC.Label, null, "Rows per page (sm)"),
      h(DC.Select, { defaultValue: "20" },
        h(DC.SelectTrigger, { size: "sm", className: "w-24" }, h(DC.SelectValue, null)),
        h(DC.SelectContent, null, ["10", "20", "50"].map(function (v) { return h(DC.SelectItem, { key: v, value: v }, v); })))));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Forms

- [Calendar](/design/components/calendar.md): A month grid (react-day-picker 10) in the app's tokens: today and the selection in `primary`, outside days muted.
- [Checkbox](/design/components/checkbox.md): A 16px square check for independent on/off choices and row selection; the box fills in 150ms, then the tick draws in over 350ms (`.t-check`).
- [DateTimePicker](/design/components/date-time-picker.md): A date-and-time field in the app's own widget, instead of the browser's `datetime-local`; works in ISO strings.
- [Form](/design/components/form.md): Form fields wired to react-hook-form: each field gets a label, a control, an optional hint and an error message, with ids and ARIA linked for you.
- [Input](/design/components/input.md): The single-line text field: 36px tall, `input` border, `radius-md`, transparent over its ground (dark themes fill it with `input` at 30%).
- [Label](/design/components/label.md): The accessible field label (Radix Label): 14px medium, `leading-none`, 8px gap for an inline icon or `HelpTooltip`.
- [PhoneInput](/design/components/phone-input.md): An international phone field: `react-phone-number-input` with Max's `Input` and a searchable country picker that shows flags.
- [RadioGroup](/design/components/radio-group.md): One choice from a short, visible list (Radix RadioGroup): 16px rings in `primary`, 10px dot.
- [SecretInput](/design/components/secret-input.md): A field for API keys and tokens: masked by default with a reveal toggle, monospace, opted out of autofill.
- [Slider](/design/components/slider.md): A Radix slider for picking a number, or a range with two thumbs, on a continuous scale.
- [Switch](/design/components/switch.md): The on/off control for settings that apply immediately (Radix Switch): a 32 × 18px pill, `input` track off, `primary` on, 16px thumb with a double-bounce (`.t-toggle`, 350ms thumb, 150ms track).
- [Textarea](/design/components/textarea.md): The multi-line field; it grows with its content (`field-sizing: content`) from a 64px minimum.
- [TimezoneSelector](/design/components/timezone-selector.md): A searchable combobox (a `Popover` holding a `Command` list) over every IANA time zone the browser knows.
- [TypedOptionPicker](/design/components/typed-option-picker.md): A searchable, grouped picker for long option lists (Popover + Command), in single and multi versions.