Skip to main content

Select button

Select buttons allow the user to select from a number of predetermined choices. There is a multi-select option for select buttons.

Example

Group of select buttons on a default theme with the first button selected

Best practices

Use select button when a toggle state is desired for the experience. It is used for binary choices that become effective immediately after the user interacts with the control. For example, selecting between different options of a product to see how the price changes.

Do

  • Use concise, self-explanatory text that clearly describes the choice that the select button makes.
  • Keep regions that are affected by the selection close to the select buttons. For instance, if used to select different configurations that update the price, keep the price reasonably close in the layout.
  • Limit the amount of change that happens on selection so the choices are clearer. For example, avoid showing or hiding multiple sets of select buttons on selection.

Don’t

  • Don’t use this component when the list of choices is long. Consider the combo component instead.
  • Don’t use a single select button. It should always be part of a group of select buttons.
  • Don’t customize the fill, border or other visual characteristics of select buttons. These attributes should be inherited from the basic component.
  • Don’t use to support a third (intermediary/mixed) state.
  • Don’t use when you want to make it obvious that the component has two states, use the toggle component or checkbox instead.

Also known as

Toggle button
Toggle switch

Related

Select Menu
Menu
Button

Accessibility

  • Add descriptive text describing the select button being selected and indicate that it has been selected in the data-js-selected-text attribute for each select button.
  • If the buttons are multi selection add descriptive text describing the select button being unselected and indicate that it has been unselected in the data-js-unselected-text attribute for each select button.

Options

  • Multiselect Toggle: To make a group of buttons toggle add the data-select-button-multiselect="true" attribute to each select button.
  • Swatch Buttons: To show as color swatch add the data-select-button-swatch="00BCF2" attribute to each select button. Where the attribute value equals a hex color value. To disable a color swatch select button add the class f-swatch-disabled to the component element.

Development

  • Schema definition: The select-button schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Single selection

<div class="c-group f-wrap-items" role="group" aria-labelledby="single-select-foo">
    <button class="c-select-button" name="example" aria-pressed="false" data-js-selected-text="choice one has been selected">choice one</button>
    <button class="c-select-button" name="example" aria-pressed="false" data-js-selected-text="choice two has been selected">choice two</button>
    <button class="c-select-button" name="example" aria-pressed="false" data-js-selected-text="choice three has been selected">choice three</button>
    <span id="single-select-foo" class="x-screen-reader" role="status" aria-live="assertive"></span>
</div>

Multi selection

<div class="c-group f-wrap-items" role="group" aria-labelledby="multi-select-foo">
    <button class="c-select-button" name="multi-example" aria-pressed="false" data-js-selected-text="multi-select choice one has been selected" data-js-unselected-text="multi-select choice one has been unselected" data-select-button-multiselect="true">multi-select choice one</button>
    <button class="c-select-button" name="multi-example" aria-pressed="false" data-js-selected-text="multi-select choice two has been selected" data-js-unselected-text="multi-select choice two has been unselected" data-select-button-multiselect="true">multi-select choice two</button>
    <button class="c-select-button" name="multi-example" aria-pressed="false" data-js-selected-text="multi-select choice three has been selected" data-js-unselected-text="multi-select choice three has been unselected"
        data-select-button-multiselect="true">multi-select choice three</button>
    <span id="multi-select-foo" class="x-screen-reader" role="status" aria-live="assertive"></span>
</div>

Single swatch selection

<div class="c-group f-wrap-items" role="group" aria-labelledby="swatch-select-foo">
    <button class="c-select-button" name="swatches" aria-pressed="false" data-js-selected-text="green swatch has been selected" disabled="disabled" data-select-button-swatch="BAD80A"></button>
    <button class="c-select-button" name="swatches" aria-pressed="false" data-js-selected-text="blue swatch has been selected" data-select-button-swatch="00BCF2"></button>
    <button class="c-select-button" name="swatches" aria-pressed="false" data-js-selected-text="light grey swatch has been selected" data-select-button-swatch="CCCCCC"></button>
    <button class="c-select-button" name="swatches" aria-pressed="false" data-js-selected-text="dark grey swatch has been selected" disabled="disabled" data-select-button-swatch="333333"></button>
    <button class="c-select-button" name="swatches" aria-pressed="false" data-js-selected-text="black swatch has been selected" data-select-button-swatch="000000"></button>
    <button class="c-select-button" name="swatches" aria-pressed="false" data-js-selected-text="white swatch has been selected" data-select-button-swatch="FFFFFF"></button>
    <span id="swatch-select-foo" class="x-screen-reader" role="status" aria-live="assertive"></span>
</div>