Selector @astryx-svelte/core v0.5.2 · Selector
Usage
A dropdown selector for choosing a single value from a list of options. Supports labels, validation, descriptions, and required/optional states. Use it in forms and settings when presenting a moderate number of options. Keyboard typeahead matches a native select: typing on the focused closed trigger selects the matching option directly, repeated presses cycle through options sharing a first letter, and spaces count as match characters ("new y" reaches "New York"). With the menu open, typing moves the highlight and Enter commits. With hasSearch, typing on the closed trigger opens the popup and seeds the search input.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Provide a visible label so users understand what they are selecting. |
| Do | Use sections and dividers to organize options when the list exceeds ~8 items. |
| Do | Use renderOption for custom option rows. Do not pass SelectorOption directly as JSX children. |
| Do | Set a meaningful placeholder that hints at the expected selection (e.g. "Choose a country" not "Select..."). |
| Do | Use inside InputGroup only when the selector needs a short prefix or suffix addon as part of one decorated input surface. |
| Do | Use variant="ghost" when a selector sits in a toolbar with ghost buttons. If validation status is needed there, prefer statusVariant="tooltip" so the toolbar height stays compact. |
| Don't | Use for action menus; use Dropdown Menu for triggering commands or navigation. |
| Don't | Use when there are only two options; use a SegmentedControl or radio buttons instead. |
| Don't | Use Selector for navigation; links should be links, not dropdown options. |
| Don't | Use for yes/no or on/off choices; use Switch or CheckboxInput instead. |
| Don't | Put more than ~20 options without sections; consider Typeahead for large lists. |
| Don't | Wrap a disabled Selector in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
Examples
Common configurations, variations, and states.Selector — Clearable
Selector with a clear button to reset the selected value.
Selector — Ghost Toolbar
Borderless Selector variant composed with ghost buttons in a toolbar.
Selector — Option descriptions
Live preview pending — this block's Svelte rewrite has not landed yet.
Options carry a description, so the dropdown draws a two-line row. The closed trigger is sized by padding, so it is the size token for a one-line value and exactly one line taller for a two-line one; both on the 4px rhythm. An InputGroup pins the row, so the value folds back onto one line there.
Selector — Grouped Sections
Selector with options grouped into labeled sections.
Selector — Validation States
Selector showing error, warning, and success validation states.