Select

A select allows users to choose
a single option from a list of options.

Ref to 17:610
Ready to Use
Show details
Ready to Use
Published: March 02, 2023
Updated: March 05, 2024

Introduction

A select allows users to select a single option from a list of at least four options, while the list of options are not inherently visible. Selects are commonly used to present a list of options that are not required to be displayed at all times, such as navigation menus or radio button groups.

  • Selects are used in forms to give users the option to select from a list [e.g. selection of country]
  • Select can also be used to filter or select an action, this results in an immediate effect on the current page [e.g. change sorting of a table; filter of a product list]
  • By default, all form elements are mandatory; label them as optional only if they are indeed optional.

Usage

Selects are used to present a list of options in a space-efficient and user-friendly manner. They are particularly effective when there are a large number of options to choose from, as they allow users to quickly find the item they are looking for.

Ref to 1:5433
Ref to 1:5438
Ref to 1:5569
Ref to 1:5593

Mobile Specs

On both Android and iOs, the flyout [link to flyout tbd] falls back to OS-native styles. On screen-widths smaller than 576px, the width of the select should be set to 100vw.

Also known as

Dropdown, Dropdown Menu, Select Menu, Dropdown Field