The purpose of select inputs is to allow users to easily and accurately choose a single option from a predefined list. Typically used in forms, they provide a compact and efficient way to present a list of options and enable user selection.
Select inputs consist of a clickable area that, when activated, displays the available options in a native dropdown menu. Users can then choose one option by clicking or tapping on it, and the selected option replaces the initially displayed selection.
Anatomy
The anatomy of a select rarely differs. These are the most commonly used features of a select.
- Label. A label describing the selection required.
- Placeholder. A text indicating an action.
- Shadow. For selects it's always the token shadow-ui-outward.
- Arrow icon. Indicating the select expands downwards.