# Select Menu

> A styled select: the button shows the choice, the list opens below it with groups, icons, hints and disabled options.

Component · Forms · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/SelectMenu/)

A styled select: the button shows the choice, the list opens below it with groups, icons, hints
and disabled options. Use the native `Select` when the system picker is preferred (long lists on
phones).

- Keyboard: ↑/↓/Enter/Space open, arrows move, Home/End jump, typing jumps to a match, Enter picks,
  Escape closes.
- Inside a `Form` it submits its value under `name` and shows its validation message.

## Example

```tsx
import * as React from "react";
import { SelectMenu } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-panel tf-grid"
      style={{ "--cols": "1fr 1fr", gap: 20, paddingBottom: 260 } as React.CSSProperties}
    >
      <SelectMenu
        label="Assignee"
        placeholder="Choose a person"
        options={[
          { value: "mara", label: "Mara Ellis", hint: "Owner", group: "Leadership" },
          { value: "jonah", label: "Jonah Petit", hint: "Design", group: "Team" },
          { value: "sun", label: "Sun Lee", hint: "Growth", group: "Team" },
          { value: "rui", label: "Rui Costa", hint: "Finance", group: "Team" },
          { value: "ava", label: "Ava Brandt", hint: "Invited", group: "Team", disabled: true },
        ]}
      />
      <SelectMenu
        label="Region"
        defaultValue="eu"
        hint="Where workspace data is stored"
        options={[
          { value: "eu", label: "Europe (Frankfurt)", icon: "globe" },
          { value: "us", label: "United States (Ohio)", icon: "globe" },
          { value: "ap", label: "Asia Pacific (Sydney)", icon: "globe" },
        ]}
      />
    </div>
  );
}
```

## Props

### SelectMenu

| Prop | Type | Notes |
| --- | --- | --- |
| `options` | `(string \| SelectMenuOption)[]` | Required |
| `value?` | `string` |  |
| `defaultValue?` | `string` |  |
| `onChange?` | `(value: string) => void` |  |
| `placeholder?` | `string` |  |
| `disabled?` | `boolean` |  |
| `size?` | `"sm" \| "md"` | `sm`: a compact trigger, e.g. a sort menu next to a heading. |
| `label?` | `string` |  |
| `hint?` | `string` |  |
| `error?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |