Select Button
Select Button is used to choose single or multiple items from a list using buttons.
When to use
- Use select button components when you have a set of options, and users can choose only one option from the list. Select buttons enforce mutual exclusivity.
- Implement select buttons when the number of available choices is relatively small (e.g., less than five to seven options) to keep the user interface simple and manageable.
- Select buttons are suitable when it wants to provide a clear and visually distinct representation of options, making it evident which option is selected.
- Select buttons can be used as an alternative to radio buttons in cases where a more visually appealing or customized appearance is desired.
- Use select buttons when it needs to apply custom styling or design to the selection buttons to match the overall look and feel of your application or website.
- Select buttons are useful with binary (yes/no or true/false) choices, making it easy for users to indicate their preference.
- Incorporate select buttons in user preference or profile settings to let users specify their preferences for various settings or features.
- Implement select buttons as single-choice menus, providing a visually appealing alternative to traditional dropdown menus.
Guidelines
- Use clear and concise labels for each select button option. Ensure that the labels accurately represent the choices users are making.
- Maintain a consistent design for select buttons, including consistent button size, shape, and spacing, to create a visually cohesive user interface.
- Make selected buttons visually distinct from unselected ones to clearly indicate the user's choice. This can include using color changes, bold text, or other visual cues.
- If one option is more likely to be selected than others, consider setting it as the default choice to expedite the selection process. However, ensure users can easily change their selection.
- Group related select buttons together with a clear label or heading to provide context and organization. For example, group gender options under the label "Gender."
- Ensure that select buttons adapt to various screen sizes and orientations, maintaining their usability on both desktop and mobile devices.
Basic
Select Button requires a value to bind collection of options and allows selecting only one item by default.
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1" tabindex="0" >Off</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2" tabindex="0" >On</label>
</div>
Multiple
Setting multiple options enables choosing more than one item.
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1" tabindex="0" >Option 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2" tabindex="0" >Option 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3" tabindex="0" >Option 3</label>
</div>
Template
For custom content support define icons or text in label tag which refers to an option in the options collection.
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio7" id="btnradio7" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio7" tabindex="0" ><i class="ds ds-text-left"></i></label>
<input type="radio" class="btn-check" name="btnradio8" id="btnradio8" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio8" tabindex="0" ><i class="ds ds-text-right"></i></label>
<input type="radio" class="btn-check" name="btnradio9" id="btnradio9" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio9" tabindex="0" ><i class="ds ds-text-center"></i></label>
<input type="radio" class="btn-check" name="btnradio10" id="btnradio10" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio10" tabindex="0" ><i class="ds ds-justify"></i></label>
</div>
Disabled
When disabled is present, the element cannot be edited.
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio3" id="btnradio3" autocomplete="off" checked>
<label class="btn btn-outline-disabled" for="btnradio3" tabindex="0" >Off</label>
<input type="radio" class="btn-check" name="btnradio4" id="btnradio4" autocomplete="off" disabled>
<label class="btn btn-outline-primary" for="btnradio4" tabindex="0" >On</label>
</div>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio5" id="btnradio5" autocomplete="off" checked>
<label class="btn btn-outline-disabled" for="btnradio5" tabindex="0" >Option 1</label>
<input type="radio" class="btn-check" name="btnradio5" id="btnradio5" autocomplete="off" disabled>
<label class="btn btn-outline-primary" for="btnradio5" tabindex="0" >Option 2</label>
</div>
Accessibility
- Ensure that all interactions with the select button component can be performed using keyboard controls alone. This includes keyboard focus management and selection actions.
- Manage keyboard focus properly so that users can navigate and interact with select buttons using keyboard controls (e.g., Tab key, arrow keys). Visual focus indicators should be applied to selected buttons.
- Provide accessible labels for each select button option, using proper HTML tags, span elements, or ARIA aria-label attributes. Avoid relying solely on visual cues.
- Use appropriate ARIA roles and attributes, such as role="button", to ensure assistive technologies recognize the select buttons as interactive elements.
- Implement keyboard shortcuts (e.g., Enter key or Spacebar) for selecting and interacting with the buttons, and ensure these shortcuts are communicated to screen reader users.
- Maintain a logical order for the buttons in the DOM to ensure that screen readers and keyboard users encounter them in a meaningful sequence.
- Provide visual indicators (e.g., color changes, text styling) for selected buttons, but also ensure that these indicators are perceivable through other means, such as text labels or ARIA attributes.