Form
Select
A dropdown select component for choosing a single option from a list.
Overview
The Select component provides a dropdown interface for choosing a single option from a predefined list. It renders a trigger button that opens a floating options panel with keyboard navigation support. Built with proper ARIA semantics, it's suitable for form fields where users must select exactly one value from a known set of options, such as country selection, sorting preferences, or category filters.
Key Business & UX Benefits
- One control for single-choice from a list (country, sort, filter).
- Keyboard navigation and ARIA keep it accessible.
- Customizable trigger icon and text fit headers and forms.
- Fits sort dropdowns, country selectors, and filter bars.
Pro-Tip from Larry: Use Select for sort and filters so users pick one option without leaving the page.
Usage
Select
<Select
triggerIcon="actions/sort"
triggerText="Sort by"
modelValue="price"
:items="[
{ label: 'Price', value: 'price' },
{ label: 'Name', value: 'name' },
{ label: 'Date', value: 'date' },
]"
/>
Feature List
- Dropdown for single selection from a list
- Customizable trigger icon and text
- Keyboard navigation and ARIA support
- Suitable for sort, country, and filter forms
API Reference
| Prop | Default | Type |
|---|---|---|
items | [] | SelectItemBase[] { type, label, value, 1 more } |
placeholder | Select an option | string |
prioritizePosition | false | boolean |
trigger | {} | ButtonProps { disabled, size, variant, 5 more } |
position | popper | "popper" | "item-aligned" |
size | small | "small" | "medium" |
triggerIcon | arrows/chevron-down | string |
triggerText | string | |
label | string | |
modelValue | string |
| Slot | Type |
|---|---|
trigger | {} |
| Event | Type |
|---|---|
update:modelValue | (event: "update:modelValue", value: string | undefined): void |