Select Control
Select control primitive for building custom dropdowns, with variants, sizing, start and dropdown icons, and clearable, loading, and invalid states.
import { SelectControl } from "@plexui/vue/components/SelectControl";Examples
Overview
Variants
Sizing & roundness
Selected
Start icon
Dropdown icon
Clearable
Loading
Invalid
Disabled
Block
Country selector
Country code selector
Phone form
Optical alignment
API
Use SelectControl with any floating UI (e.g. MenuTrigger, PopoverTrigger). The control renders the trigger; you provide the dropdown content. The default slot is the control's content. Attributes and listeners that are not props land on the control's <span role="button">; @keydown receives only the keys the control does not handle itself. To decide when the control opens (or to keep it closed), listen to @interact and control the dropdown's open state yourself: the wrapping trigger then no longer opens on its own.
| Prop | Type | Default | Description |
|---|---|---|---|
selected | boolean | false | Whether a value is selected (affects placeholder styling) |
variant | "soft" | "outline" | "ghost" | "outline" | Visual variant |
size | ControlSize | "md" | Control size (3xs to 3xl) |
pill | boolean | false | Fully rounded trigger |
StartIcon | Component | — | Icon at start |
@clear-click | () => void | — | Enables the clear button when set (a function prop, onClearClick) |
@interact | () => void | — | Called on pointer down, ArrowDown, ArrowUp and Space (a function prop, onInteract). Without it, a wrapping trigger opens on pointer down |
dropdown-icon-type | "chevronDown" | "dropdown" | "none" | "dropdown" | Dropdown indicator style |
invalid | boolean | false | Invalid state |
disabled | boolean | false | Disable control |
block | boolean | false | Full width |
loading | boolean | false | Loading state (aria-busy); hides the indicators and ignores interaction |
optically-align | "start" | "end" | — | Optical alignment |
class | string | — | Applied to the control |
SelectControl shares the unified 9-step size scale with Button, Input, Select, and SegmentedControl.
Styling
Select Control reads these component tokens. Override them at any scope to restyle it:
--input-border-color-invalid: border color invalid (defaultvar(--color-border-danger-outline))--input-outline-border-color: outline border color (defaultvar(--color-border-primary-outline))--input-outline-border-color-hover: outline border color hover (defaultlight-dark(var(--alpha-25), var(--alpha-30)))--input-placeholder-text-color: placeholder text color (defaultvar(--color-text-tertiary))--input-text-color: text color (defaultvar(--color-text))--select-control-font-weight: font weight (defaultvar(--font-weight-normal))