HTML5 Segmented Toggle Button

 

A Segmented Toggle Button contains two or more toggle buttons. One button is always in the active state.

The button has three states: enabled, active, and disabled.

 

Creation

 

 <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" disabled />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>

 

Configuration

 

We recomend encapsulate the code with

 <div data-role="fieldcontain">
...
</div>

And the input id must match with the for attribute in the label.

<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>

 

Disabled State

 

If you want to make a toggle button no selectable, add the disabled attribute to the input tag:

<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" disabled />