# Select

> A native `<select>` styled as a bordered, rounded field and progressively upgraded with customizable-select rendering — a custom trigger button, a value slot mirroring the current selection, and richly styled options and groups — wherever the browser resolves `appearance: base-select`.

```ts
import { Select } from "@sdxc/ui";
```

Renders a native `<select>` styled as a bordered, rounded field that
progressively upgrades to customizable-select rendering via
`appearance: base-select`, falling back to the platform's own dropdown.

## Examples

```tsx
<Select aria-label={t("form.country.label")} required>
	<Select.Option value="">{t("form.country.placeholder")}</Select.Option>
	<Select.Option value="us">{t("countries.us")}</Select.Option>
	<Select.Option value="ca">{t("countries.ca")}</Select.Option>
</Select>
```

```tsx
<Select aria-label={t("form.plan.label")} color="brand">
	<Select.Trigger />
	<Select.Group label={t("form.plan.groups.personal")}>
		<Select.Option value="free">{t("plans.free")}</Select.Option>
		<Select.Option value="pro">{t("plans.pro")}</Select.Option>
	</Select.Group>
</Select>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role for the focus-visible ring. Defaults to DEFAULT_COLOR. |

Also accepts everything in `Omit<TagProps<"select">, "role" | "defaultValue" | "value">`.


### Select.Trigger

Renders Select's customizable trigger: a native `<button>` placed as Select's first child, showing Select.Value and a rotating chevron by default, filling the field's box edge to edge.

Also accepts everything in `TagProps<"button">`.


### Select.Value

Renders a native `<selectedcontent>` element inside Select.Trigger, mirroring the currently selected Select.Option's content via the platform; `children` render as a fallback where it's treated as unknown.

Also accepts everything in `TagProps<"selectedcontent">`.


### Select.Option

Renders a native `<option>` styled for the rounded, padded row a supporting browser shows inside Select's `::picker(select)` dropdown, reading its own hover, focus, checked, and disabled states.

Also accepts everything in `TagProps<"option">`.


### Select.Group

Renders a native `<optgroup>` styled as a padded run of Select.Options, set off from the group before it by a block-start divider on every group after the first.

Also accepts everything in `TagProps<"optgroup">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role, each mapped to its matching `--ui-*` variables. |