Bugcrowd Design System

Search/

Select

New

Last modified:

Select inputs.

Back to top

Variants

Example of Select - default

<>
  <label class="bc-label" for="select-color-default">Select a color</label>
  <div class="bc-select">
    <select class="bc-select__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 BcSelect component that wraps React Select as the default offering.

HTML

Last modified:

Using selects

  • 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-select--blockMakes the select full-width (100%)

Accessibility

Last modified:

Javascript-powered selects

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> to give users the ability to make a single selection from a group of options.

Unlike radio buttons selects 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: