Selector @astryx-svelte/core v0.3.0 · 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.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 — Grouped Sections
Selector with options grouped into labeled sections.
Selector — Validation States
Selector showing error, warning, and success validation states.