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
  • Patrick De Young avatar picture
  • Trevor Brennan avatar picture
  • Dominik Wilkowski avatar picture
  • Gary Broadbent avatar picture
  • Simon Schwartz avatar picture
  • Alex Page avatar picture

Colour impairment

How the select is viewed with various colour blindnesses

Example

Grayscale

How the select is viewed with total colour blindness.

Example

Keyboard accessibility

How keyboard navigation works with select.

Example

Screen readers

What option?

Please select.

[What option? collapsed pop up button].

Please select [menu item].

Option 1 [menu item].

Option 2 [menu item].

Option 3 [menu item].

Example of a disabled select.

Please select.

[Example of a disabled select, dimmed collapsed pop up button].

please select [menu item].

Option 1 [menu item].

Option 2 [menu item].

Option 3 [menu item].

How the select demo is described by assistive technology.

As read with macOS High Sierra VoiceOver.