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

# SelectTrigger

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

> The pressable surface that opens a [SelectContent.root](/v3/reference/theming/keys/SelectContent.md#theme-key-SelectContent-root). Wears the editable field recipe: a `bg-field` fill on a bottom-only `field-line`, square `rounded-vueda-field` corners, and a `hover:bg-field-hover` step, so a picker that sets a value reads as a field rather than a button. Focus recolours the bottom line to `--ring` and adds the focus ring. Three size tiers ride `h-vueda-control*` plus matching `px-vueda-control-px*`, and `aria-invalid` swaps that line and the focus-ring shadow to destructive. Placeholder text mutes to `--muted-foreground` so an unselected trigger reads as empty rather than as a chosen value.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/SelectTrigger.md#theme-key-SelectTrigger-root) | 8 classes | The pressable surface that opens a [SelectContent.root](/v3/reference/theming/keys/SelectContent.md#theme-key-SelectContent-root). Wears the editable field recipe: a `bg-field` fill on a bottom-only `field-line`, square `rounded-vueda-field` corners, and a `hover:bg-field-hover` step, so a picker that sets a value reads as a field rather than a button. Focus recolours the bottom line to `--ring` and adds the focus ring. Three size tiers ride `h-vueda-control*` plus matching `px-vueda-control-px*`, and `aria-invalid` swaps that line and the focus-ring shadow to destructive. Placeholder text mutes to `--muted-foreground` so an unselected trigger reads as empty rather than as a chosen value. |

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

## root

> The pressable surface that opens a [SelectContent.root](/v3/reference/theming/keys/SelectContent.md#theme-key-SelectContent-root). Wears the editable field recipe: a `bg-field` fill on a bottom-only `field-line`, square `rounded-vueda-field` corners, and a `hover:bg-field-hover` step, so a picker that sets a value reads as a field rather than a button. Focus recolours the bottom line to `--ring` and adds the focus ring. Three size tiers ride `h-vueda-control*` plus matching `px-vueda-control-px*`, and `aria-invalid` swaps that line and the focus-ring shadow to destructive. Placeholder text mutes to `--muted-foreground` so an unselected trigger reads as empty rather than as a chosen value.

Default classes:

```text
data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground hover:bg-field-hover
field-line flex w-fit items-center justify-between gap-2 rounded-vueda-field bg-field px-vueda-control-px text-sm whitespace-nowrap transition-shadow
data-[size=default]:h-vueda-control data-[size=sm]:h-vueda-control-sm data-[size=lg]:h-vueda-control-lg data-[size=lg]:px-vueda-control-px-lg
disabled:pointer-events-none disabled:cursor-not-allowed
disabled:!bg-disabled disabled:!text-disabled-foreground disabled:!hairline-border
*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2
[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
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/SelectTrigger.theme.js:18`