Last modified:

Select inputs, aka dropdowns.


Example of Dropdowns - default

<label class="bc-label" for="select-color-default">Select a color</label>
<div class="bc-dropdown">
  <select class="bc-dropdown__select" id="select-color-default">
    <option value="">Please select</option>
    <option value="1">RebeccaPurple</option>
    <option value="2">FloralWhite</option>
    <option value="3">FireBrick</option>

React documentation

Last modified:

TODO: Create a new BcDropdown component and migrate it’s Markdown.


Last modified:

Using dropdowns

  • 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>.


Last modified:

The following variants are available:

.bc-dropdown__selectBEM class of .bc-dropdown that get’s applied to select element


Last modified:

Javascript-powered dropdowns

If you customize your own dropdown, eg if the <select> element is insufficient or incapable in meeting design needs, ensure the element is accessible by making use of ARIA attributes.


Last modified:

Use <select> dropdowns to give users the ability to make a single selection from a group of options.

Unlike radio buttons select dropdowns can allow users to revert a selection by selecting the first (zero value) option, if an initial zero-value option is provided.

See also

Last modified: