Select

v3.0.0

Select provides a means to select a single item from a collapsible list. Use of select helps to reduce input errors and screen space. It's commonly used to help users enter a value into a form field.

Released

History
View changes
Install
npm i @gold.au/select
Tags
Requires
Contributors
  • Gary Broadbent avatar picture
  • Simon Schwartz avatar picture
  • Dominik Wilkowski avatar picture
  • Patrick De Young avatar picture
  • Trevor Brennan avatar picture
  • Alex Page avatar picture

Usage

Select boxes (also known as drop-down lists) are provided for completeness, but should be avoided where possible.

Select boxes have several inherent disadvantages:

  • they are implemented inconsistently on various devices
  • they hide content from the user by default
  • they present usability difficulties for users with low digital literacy.

For most small lists (for example, choosing an Australian state or territory), consider using radio buttons, checkboxes (where multiple selections are allowed) or text inputs instead.

In a scenario with a long list of options (for example, selecting a country), select boxes may provide an acceptable trade-off between usability and layout compactness.

Appearance

The design of the select box is intended to match the text-inputs and buttons used in the system. This way form elements can be combined inline.

For cross-browser consistency, the default browser styles for select-boxes are removed and a background image is used for the icon. For more info see Styling HTML forms