Create Segmented Controls With Radio Buttons – Toggle Radios

Category: CSS & CSS3 , Form | May 21, 2020
Author: adamculpepper
Views Total: 403 views
Official Page: Go to website
Last Update: May 21, 2020
License: MIT

Preview:

Create Segmented Controls With Radio Buttons – Toggle Radios

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

You Might Be Interested In:


Leave a Reply