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

# NativeSelectOption

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

> The native `<option>` tinted to inherit the popover surface. Per-row layout, highlight, and check indicator are all owned by the OS; for richer option chrome (icons, sub-labels, highlighted-vs-checked distinction) use [SelectItem](/v3/reference/theming/keys/SelectItem.md) or [ComboboxItem](/v3/reference/theming/keys/ComboboxItem.md).

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/NativeSelectOption.md#theme-key-NativeSelectOption-root) | `bg-popover text-popover-foreground` | The native `<option>` tinted to inherit the popover surface. Per-row layout, highlight, and check indicator are all owned by the OS; for richer option chrome (icons, sub-labels, highlighted-vs-checked distinction) use [SelectItem](/v3/reference/theming/keys/SelectItem.md) or [ComboboxItem](/v3/reference/theming/keys/ComboboxItem.md). |

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

## root

> The native `<option>` tinted to inherit the popover surface. Per-row layout, highlight, and check indicator are all owned by the OS; for richer option chrome (icons, sub-labels, highlighted-vs-checked distinction) use [SelectItem](/v3/reference/theming/keys/SelectItem.md) or [ComboboxItem](/v3/reference/theming/keys/ComboboxItem.md).

Default classes:

`bg-popover text-popover-foreground`

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