option bar

Option bars are a different visual representation of a radio group.

For this component to work correctly, you will need to set the name attribute of all the input elements in the same bar to the same value, and also give proper id attributes that match the respective for attributes on the labels.
table of content

component variations

options with labels

Open on blank page
<ul class="a-option-bar">
  <li class="a-option-bar__item">
    <input type="radio" id="1" name="demo-options-with-labels" />
    <label class="a-option-bar__option" for="1" aria-label="Option 1">
      <span class="a-option-bar__label">Option 1</span>
    </label>
  </li>
  <li class="a-option-bar__item">
    <input type="radio" id="2" name="demo-options-with-labels" />
    <label class="a-option-bar__option" for="2" aria-label="Option 2">
      <span class="a-option-bar__label">Option 2</span>
    </label>
  </li>
  <li class="a-option-bar__item">
    <input type="radio" id="3" name="demo-options-with-labels" />
    <label class="a-option-bar__option" for="3" aria-label="Option 3">
      <span class="a-option-bar__label">Option 3</span>
    </label>
  </li>
</ul>

options with labels and icons

Open on blank page
<ul class="a-option-bar">
  <li class="a-option-bar__item">
    <input type="radio" id="1-1" name="demo-options-with-labels-and-icons" />
    <label class="a-option-bar__option" for="1-1" aria-label="Option 1">
      <i class="a-icon a-option-bar__icon boschicon-bosch-ic-emoji-happy"></i>
      <span class="a-option-bar__label">Option 1</span>
    </label>
  </li>
  <li class="a-option-bar__item">
    <input type="radio" id="1-2" name="demo-options-with-labels-and-icons" />
    <label class="a-option-bar__option" for="1-2" aria-label="Option 2">
      <i class="a-icon a-option-bar__icon boschicon-bosch-ic-emoji-happy"></i>
      <span class="a-option-bar__label">Option 2</span>
    </label>
  </li>
  <li class="a-option-bar__item">
    <input type="radio" id="1-3" name="demo-options-with-labels-and-icons" />
    <label class="a-option-bar__option" for="1-3" aria-label="Option 3">
      <i class="a-icon a-option-bar__icon boschicon-bosch-ic-emoji-happy"></i>
      <span class="a-option-bar__label">Option 3</span>
    </label>
  </li>
</ul>

options with icons

Open on blank page
<ul class="a-option-bar">
  <li class="a-option-bar__item">
    <input type="radio" id="2-1" name="demo-options-with-icons" />
    <label class="a-option-bar__option" for="2-1">
      <i class="a-icon a-option-bar__icon boschicon-bosch-ic-emoji-happy"></i>
    </label>
  </li>
  <li class="a-option-bar__item">
    <input type="radio" id="2-2" name="demo-options-with-icons" />
    <label class="a-option-bar__option" for="2-2">
      <i class="a-icon a-option-bar__icon boschicon-bosch-ic-emoji-happy"></i>
    </label>
  </li>
  <li class="a-option-bar__item">
    <input type="radio" id="2-3" name="demo-options-with-icons" />
    <label class="a-option-bar__option" for="2-3">
      <i class="a-icon a-option-bar__icon boschicon-bosch-ic-emoji-happy"></i>
    </label>
  </li>
</ul>

options with labels and icons, 3rd disabled

Open on blank page
<ul class="a-option-bar">
  <li class="a-option-bar__item">
    <input
      type="radio"
      id="3-1"
      name="demo-options-with-labels-and-icons,-3rd-disabled"
    />
    <label class="a-option-bar__option" for="3-1" aria-label="Option 1">
      <i class="a-icon a-option-bar__icon boschicon-bosch-ic-emoji-happy"></i>
      <span class="a-option-bar__label">Option 1</span>
    </label>
  </li>
  <li class="a-option-bar__item">
    <input
      type="radio"
      id="3-2"
      name="demo-options-with-labels-and-icons,-3rd-disabled"
    />
    <label class="a-option-bar__option" for="3-2" aria-label="Option 2">
      <i class="a-icon a-option-bar__icon boschicon-bosch-ic-emoji-happy"></i>
      <span class="a-option-bar__label">Option 2</span>
    </label>
  </li>
  <li class="a-option-bar__item">
    <input
      type="radio"
      id="3-3"
      name="demo-options-with-labels-and-icons,-3rd-disabled"
      disabled=""
    />
    <label class="a-option-bar__option" for="3-3" aria-label="Option 3">
      <i class="a-icon a-option-bar__icon boschicon-bosch-ic-emoji-happy"></i>
      <span class="a-option-bar__label">Option 3</span>
    </label>
  </li>
</ul>

additional content

styles SCSS

.a-option-bar {
  // reset the ul
  margin-bottom: 0;

  // then reset the li elements
  &__item {
    margin: 0;
    padding: 0;
    /* stylelint-disable-next-line a11y/content-property-no-static-value */
    &::before {
      content: none;
    }
  }

  input {
    position: absolute;
    z-index: -1;
  }

  label {
    font-size: inherit;
  }

  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 1rem;

  &__label {
    padding: 1rem 0.75rem 1rem 0;

    &:only-child {
      padding: 0.75rem 1rem;
    }
  }

  &__icon + &__label {
    text-align: left;
    margin-left: 8px;
  }

  &__icon {
    font-size: 1.5rem;
    padding: 1rem 0 1rem 0.75rem;

    &:only-child {
      padding: 0.75rem;
    }
  }

  /* stylelint-disable-next-line no-descending-specificity */
  &__option {
    display: inline-flex;
    color: var(--neutral__enabled__front__default);
    background-color: var(--neutral__enabled__fill__default);
    cursor: pointer;
    letter-spacing: 0;
    margin: 0;

    &:hover {
      color: var(--neutral__enabled__front__hovered);
      background-color: var(--neutral__enabled__fill__hovered);
    }
  
    &:active {
      color: var(--neutral__enabled__front__pressed);
      background-color: var(--neutral__enabled__fill__pressed);
    }
  }

  :focus-visible {
    outline: none;

    & + .a-option-bar__option {
      @include focus-inside;
    }
  }

  :disabled + &__option {
    color: var(--neutral__disabled__front__default);
    background-color: var(--neutral__disabled__fill__default);
    cursor: default;
  }

  :checked + &__option {
    color: var(--major-accent__enabled__front__default);
    background-color: var(--major-accent__enabled__fill__default);
  }

  :checked + &__option:hover {
    color: var(--major-accent__enabled__front__hovered);
    background-color: var(--major-accent__enabled__fill__hovered);
  }

  :checked + &__option:active {
    color: var(--major-accent__enabled__front__pressed);
    background-color: var(--major-accent__enabled__fill__pressed);
  }
}