Select

@summonware/ui · select · P0 · Forms

Usage

A native dropdown for choosing one option from a known list. Native on purpose: it inherits the platform picker on mobile, keyboard type-ahead on desktop, and correct behaviour in assistive tech — none of which a custom listbox gets for free.
import { Select } from '@summonware/ui';

Best practices

DoUse `placeholder` for the empty state. It renders as a disabled first option, so it cannot be submitted as a value.
DoPrefer radios below about five options — visible choices beat a menu the user has to open.
Don'tUse a select for more than about twenty options. That is an autocomplete.
Don'tOrder options arbitrarily. Sort alphabetically, or by frequency of use if you know it.

Examples

Common configurations, variations and states.

Basic

With a placeholder as the unselected state.

States

Determines applicable tax.

Hint, error and disabled behave exactly as they do on a text input — the same Field wrapper drives all three.

Reference variants

2 of 4 labels from the reference are demonstrated above.
Single select inputForm interactionText inputsMultiple select input

Where it appears

Used on 26 catalogued screens, including admins-course-course-add, admins-course-dashboard, admins-course-setting-payment, admins-course-site, admins-course-student-add, admins-course-student-apply and 20 more.