Bugcrowd Design System

Bugcrowd Design System

Search/

Dropdowns

Last modified:

Select inputs, aka dropdowns.

Back to top

Variants

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>
    </select>
  </div>
</>
Open in Playroom

React documentation

Last modified:

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

HTML

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

Design

Last modified:

The following variants are available:

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

Accessibility

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.

Rationale

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: