Halstack

Design system

v6.0.0

Select

Ready

The select component allows users to make single or multiple selections from a pre-defined list of options.

Usage

Considerations about the select usage:

A dialog element should allow the user to select one option from a list.
If the list of options is short (4 or less), use checkboxes instead of the select component.
The select component should always display a label different from any name in the option list.
Use a pre-selected good default where possible.
Use progressive disclosure between linked select components.
If more than one option is applicable, use the multi-select variant.

Variants

Variant	Description
Single	Allows the user to select one option from a list
Multiple	Allows the user to select multiple options from a list

Filter

Both select variants can be filterable.
Use the filter when the number of items in the optionList is extremely long (± 15 elements).
This list will be reduced to show only the matches as the user types.
The value will change when the user types a string that matches an option from the list or pick one manually.
When the search does not match any result, a "No matches found" message will be displayed.

Required and optional

When labeled as optional, the select will display an option matching the placeholder to allow leaving it empty.
When no optional label appears, the select is required.
If the select was left empty, the required should display the error "This field can not be empty" when the select loses the focus.

Contents

Required and optional

Edit this page on GitHub

Previous

Resultset Table