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

# SelectItem

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

> A single option inside a [SelectContent.viewport](/v3/reference/theming/keys/SelectContent.md#theme-key-SelectContent-viewport). Carries the two-track selection state that distinguishes Select from Combobox: the highlighted-but-not-committed option paints `--accent` / `--accent-foreground` on `:focus`, while the committed value (`data-state=checked`) tints with `bg-primary/10` so the chosen option reads as a soft primary band even when another row is highlighted; the indicator icon alone is not a strong enough signal at rest. `pr-8` reserves trailing space for the check indicator; `rounded-sm` keeps the option a chit inside the popover slab.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/SelectItem.md#theme-key-SelectItem-root) | 4 classes | A single option inside a [SelectContent.viewport](/v3/reference/theming/keys/SelectContent.md#theme-key-SelectContent-viewport). Carries the two-track selection state that distinguishes Select from Combobox: the highlighted-but-not-committed option paints `--accent` / `--accent-foreground` on `:focus`, while the committed value (`data-state=checked`) tints with `bg-primary/10` so the chosen option reads as a soft primary band even when another row is highlighted; the indicator icon alone is not a strong enough signal at rest. `pr-8` reserves trailing space for the check indicator; `rounded-sm` keeps the option a chit inside the popover slab. |

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

## root

> A single option inside a [SelectContent.viewport](/v3/reference/theming/keys/SelectContent.md#theme-key-SelectContent-viewport). Carries the two-track selection state that distinguishes Select from Combobox: the highlighted-but-not-committed option paints `--accent` / `--accent-foreground` on `:focus`, while the committed value (`data-state=checked`) tints with `bg-primary/10` so the chosen option reads as a soft primary band even when another row is highlighted; the indicator icon alone is not a strong enough signal at rest. `pr-8` reserves trailing space for the check indicator; `rounded-sm` keeps the option a chit inside the popover slab.

Default classes:

```text
focus:bg-accent focus:text-accent-foreground active:bg-accent-active active:text-accent-foreground data-[state=checked]:bg-primary/10
[&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none
data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2
```

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