Creating a Toggle Pill

Figure 1. An example of a simple toggle pill with choices “Hotels” and “Apartments”

As part of a project I am currently working on, I decided to add a toggle pill similar to that shown above with the options Files (PDF) and Snippets shown below.

Under the hood, a toggle pill operates essentially the same as a radio button group, wherein a set or pair of options is presented with the user only to select one at time. Below is a detailed explanation of relevant parts of the HTML, CSS, and jQuery.

HTML / CSS

The Toggle Container Control

<!-- Toggle  -->
<div class="toggle-container">
  <div class="segmented-control">
    <input type="checkbox" id="table-toggle" />
    <label class="segmented-option" data-value="documents">Files (PDF)</label>
    <label class="segmented-option" data-value="snippets">
      Snippets&nbsp;&nbsp;&nbsp;&nbsp;
    </label>
  <div class="segmented-slider"></div>
  </div>
</div>

The toggle-container defines the base structure with four visible components, the segmented-control which is visually shown as the light-gray background contains the input and the segmented-option labels. The table-toggle checkbox is the meat of the whole operation. The light-blue segmented-slider shows the user which option is selected.

The segmented-control is defined with a relative position in order to give the segmented-slider a…