Create Segmented Controls With Radio Buttons – Toggle Radios

Preview:

Description:

Toggle Radios is a pure CSS library which converts a group or radios into responsive, customizable, SEO-friendly inline toggle button groups (also called segmented controls).

How to use it:

1. Download and insert the toggle-radios.css into the document.

<link href="toggle-radios.css" rel="stylesheet" />

2. Insert a group of radio buttons with labels into a DIV container with the CSS class of ‘toggle-radio’. That’s it.

<div class="toggle-radio">
  <input type="radio" name="default" id="default_Option1" value="Option1">
  <label for="default_Option1">Option 1</label>
  <input type="radio" name="default" id="default_Option2" value="Option2" checked>
  <label for="default_Option2">Option 2</label>
  <input type="radio" name="default" id="default_Option3" value="Option3">
  <label for="default_Option3">Option 3</label>
</div>

3. Change the button styles:

• rounded
• square

<div class="toggle-radio" data-style="rounded">
  <input type="radio" name="default" id="default_Option1" value="Option1">
  <label for="default_Option1">Option 1</label>
  <input type="radio" name="default" id="default_Option2" value="Option2" checked>
  <label for="default_Option2">Option 2</label>
  <input type="radio" name="default" id="default_Option3" value="Option3">
  <label for="default_Option3">Option 3</label>
</div>
<div class="toggle-radio" data-style="square">
  <input type="radio" name="default" id="default_Option1" value="Option1">
  <label for="default_Option1">Option 1</label>
  <input type="radio" name="default" id="default_Option2" value="Option2" checked>
  <label for="default_Option2">Option 2</label>
  <input type="radio" name="default" id="default_Option3" value="Option3">
  <label for="default_Option3">Option 3</label>
</div>

4. Override the background color of the toggle buttons:

• red
• orange
• yellow
• green
• blue
• purple
• gray

<div class="toggle-radio" data-color="red">
  <input type="radio" name="default" id="default_Option1" value="Option1">
  <label for="default_Option1">Option 1</label>
  <input type="radio" name="default" id="default_Option2" value="Option2" checked>
  <label for="default_Option2">Option 2</label>
  <input type="radio" name="default" id="default_Option3" value="Option3">
  <label for="default_Option3">Option 3</label>
</div>

Changelog:

05/21/2020

• Removing font icon support in favor of SVGs

05/20/2020

• fixing a bug with display:inline-block

05/19/2020

• fixing the border colors