SelectV2

The SelectV2 component allows you to choose one or multiple options from a collapsed dropdown with options.

OverviewPropertiesUsage

Show selected options first

The showSelectedOptionsFirst property configures whether the options should be reordered to show the selected options at the top of the list. The reordering gets triggered when the overlay is closed and opened again.

• Use this property for most cases, especially for lengthy lists of options (+5) or when the user is expected to modify the selection frequently, such as refining filtering criteria.
• Don't use it when options are intended to be logically ordered. For example, when ascending or descending numerical options like a table page size or alphabetical like a country list.

Radio vs. Checkbox vs. Select

Radio

• Use Radios when users need to make a single selection from a mutually exclusive set of options.

Checkbox

• Use Checkboxes when users can select zero, one, or multiple, non-mutually exclusive options.
• Consider using a Select to optimize space if the list has more than five options. However, showing the whole list of checkboxes may be relevant in some use cases, for example, when the space can afford it or the options are relevant enough to be always visible.

Select

• Use Selects to conserve space or for their built-in filtering property, especially when presenting an extensive list of options.