Segmented Control

Github Page

A Segment Control is a horizontal control made of multiple segments. It provides a compact means of grouping together a number of controls.

Examples

Stretched - two items
Stretched - two three items
Sized
Shrink-wrapped
Sized and centred
Shrink-wrapped and centred

Code

Markup
<form action="#">
  <fieldset>
    <legend>Legend text</legend>
    <ul class="segmented-control segmented-control--stretched">
      <li>
         <input type="radio" id="one" name="choose1">
         <label for="one">one</label>
      </li>
      <li>
         <input type="radio" id="two" name="choose1">
         <label for="two">two</label>
      </li>
    </ul>
  </fieldset>
</form>

Github Page