When using <select>

• Keep the number of options low and ensure they are clear and concise
• Avoid long options. Preventing overflow is difficult — be mindful of this, especially at small viewports.
• Avoid any ambiguity between any of the options. Related options can be grouped via an <optgroup>.

TODO.

Placeholders

Do not pass a custom placeholder unless directed.

Un-selecting values

Pass isClearable to BcSelect’s React Select to let users clear a selection.

To make a native HTML <select> clearable, make the first default option a zero-value option. This way, unlike radio buttons, selects allow users to revert a selection by selecting this first (zero value) option.

Ensure Selects have an accessible Label.

Ensure your BcSelect’s BcSelectOptionsType label is human-readable as this string is used to generate aria-labels within the Select.

Use of React Select

We have need for more complex select patterns, namely to support:

• creatable selects
• multi-option selects
• asynchronous result filtering (e.g. for large option sets).

We’ve standardized on React Select to support these more complex use cases.

Support for native <select>

We continue to support native HTML selects in case React Select is not appropriate or available.

Please use BcSelect’s React Selects over native HTML selects unless directed.

• Dropdowns (deprecated)