Segmented control

Used instead of radio button when there are a limited number of mutually-exclusive choices.

To illustrate the styling of checked and hover states, .hover and .checked classes have been added to simulate these states. These classes are not required in production where the :hover and :checked pseudo-classes are used.

Sex

Male Female

Your options

Option 1 Option 2 Option 3

HTML

    
<div class="form__field segmented-control segmented-control--2-across">
  <p class="label">Sex</p>
  
  <input id="sex-male" name="sex" type="radio"   />
  <label class="segmented-control__label" for="sex-male">Male</label>
  
  <input id="sex-female" name="sex" type="radio"   />
  <label class="segmented-control__label" for="sex-female">Female</label>
  
</div>

SCSS

    .segmented-control {
  position: relative;
  width: 100%;
  margin-bottom: 28px;
  text-align: center;

  input[type=radio] {
    @include hide-visually;
  }

  .segmented-control__label {
    @include form-segmented-control(unselected);
    width: 50%;

    &.invalid {
      @include form-segmented-control(invalid);
    }
  }

  input[type=radio]:checked + label, .checked {
    @include form-segmented-control(selected);
  }
}

.segmented-control--2-across .segmented-control__label {
  width: 50%;
}

.segmented-control--3-across .segmented-control__label {
  width: 33%;
}

.segmented-control--4-across .segmented-control__label {
  width: 25%;
}

Connect Dementia Research

Pattern Library

Segmented control

HTML

SCSS