Select Control
Customizable select control for use with any type of floating UI
import { SelectControl } from "@plexui/ui/components/SelectControl";Examples
Overview
Select date...
Variants
soft
Sample value
outline
Sample value
ghost
Sample value
Sizing & roundness
size
variant
Select...Select...
Select...Tool callsWith tool callsTodayToday
Selected
Select...
Start icon
Select date...
Dropdown icon
dropdownIconType
Select date...
Clearable
Selected value
Loading
Loading...
Invalid
Pineapple on pizza
Disabled
Reader
Block
Select...
Optical alignment
opticallyAlign
Default
Ghost controlopticallyAlign="start"
Ghost controlReference
Use SelectControl with any floating UI (e.g. Menu, Popover). The control renders the trigger; you provide the dropdown content.
| Prop | Type | Default | Description |
|---|---|---|---|
selected | boolean | — | Whether a value is selected (affects placeholder styling) |
variant | "soft" | "outline" | "ghost" | "outline" | Visual variant |
size | string | — | Control size |
pill | boolean | — | Fully rounded trigger |
StartIcon | Component | — | Icon at start |
onClearClick | () => void | — | Enables clear button when set |
dropdownIconType | "chevronDown" | "dropdown" | "none" | — | Dropdown indicator style |
invalid | boolean | — | Invalid state |
disabled | boolean | — | Disable control |
block | boolean | — | Full width |
loading | boolean | — | Loading state |
opticallyAlign | "start" | "end" | — | Optical alignment |
SelectControl shares the unified 9-step size scale with Button, Input, Select, and SegmentedControl.