Choice Buttons

Visually enhanced radio/checkbox buttons.

How to

The Choice Buttons component is used to display a list of radio/checkbox buttons that appear as clickable boxes. Use this component to visually enhance the radio/checkbox choices in a form.

To modify the gap between the buttons, update the gap-{size} utility class applied to the .choice-btns element.

Make sure the <label> value matches the content of the button. Users accessing the content using a screen reader will read the content of the .choice-btn__fallback element. 

The component includes the following custom properties:

:root {
  --choice-btn-border-width: 2px;
  --choice-btn-align-items: center; // set vertical alignment between custom input and content [center, start, end]
  // custom input
  --choice-btn-input-size: 20px; // custom input size
  --choice-btn-input-icon-size: 16px; // icon size
  --choice-btn-input-border-width: 2px; // custom input border width
  --choice-btn-input-margin-right: var(--space-sm); // gap between custom input and content
  --choice-btn-input-translate-y: 0em; // (optional) translate-y input to align it with the text 
}

Categories

• Forms > Form Elements

Bug report & feedback

Component Github page ↗