---
url: "https://vueda.dev/v3/reference/theming/keys/NativeSelect.md"
title: "NativeSelect"
---

# NativeSelect

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> The native `<select>` styled to match the VUEDA control shell. Used where a JS-driven [SelectTrigger](/v3/reference/theming/keys/SelectTrigger.md) or [ComboboxTrigger](/v3/reference/theming/keys/ComboboxTrigger.md) would be overkill: short fixed enums on touch devices, environments where native menu UX is preferred. Same control-height, `bg-field` fill, bottom `field-line`, recoloured focus line, and `aria-invalid` shell as [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root), with the shared `hover:bg-field-hover` step. `appearance-none` strips the native chevron and `pr-9` reserves space for the icon the consumer paints. The option surface inside the dropdown is owned by the OS; deep styling lives in the JS-driven pickers.

Vue component: [NativeSelect](/v3/reference/api/vue/NativeSelect.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/NativeSelect.md#theme-key-NativeSelect-root) | 7 classes | The native `<select>` styled to match the VUEDA control shell. Used where a JS-driven [SelectTrigger](/v3/reference/theming/keys/SelectTrigger.md) or [ComboboxTrigger](/v3/reference/theming/keys/ComboboxTrigger.md) would be overkill: short fixed enums on touch devices, environments where native menu UX is preferred. Same control-height, `bg-field` fill, bottom `field-line`, recoloured focus line, and `aria-invalid` shell as [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root), with the shared `hover:bg-field-hover` step. `appearance-none` strips the native chevron and `pr-9` reserves space for the icon the consumer paints. The option surface inside the dropdown is owned by the OS; deep styling lives in the JS-driven pickers. |

<a id="theme-key-NativeSelect-root"></a>

## root

> The native `<select>` styled to match the VUEDA control shell. Used where a JS-driven [SelectTrigger](/v3/reference/theming/keys/SelectTrigger.md) or [ComboboxTrigger](/v3/reference/theming/keys/ComboboxTrigger.md) would be overkill: short fixed enums on touch devices, environments where native menu UX is preferred. Same control-height, `bg-field` fill, bottom `field-line`, recoloured focus line, and `aria-invalid` shell as [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root), with the shared `hover:bg-field-hover` step. `appearance-none` strips the native chevron and `pr-9` reserves space for the icon the consumer paints. The option surface inside the dropdown is owned by the OS; deep styling lives in the JS-driven pickers.

Default classes:

```text
placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground hover:bg-field-hover
field-line h-vueda-control w-full min-w-0 appearance-none rounded-vueda-field bg-field px-vueda-control-px pr-9 text-sm transition-shadow
disabled:pointer-events-none disabled:cursor-not-allowed
disabled:!bg-disabled disabled:!text-disabled-foreground disabled:!hairline-border
focus-visible:hairline-ring focus-visible:focus-ring-shadow
data-[warning=true]:not-aria-invalid:hairline-warning
aria-invalid:hairline-destructive aria-invalid:focus-visible:focus-ring-shadow-destructive
```

Source: `client/lib/theme/vueda-tailwind/controls/NativeSelect.theme.js:18`