Branding & Style Guide

This shows default behavior with three options. If one option is set to checked, focus tabbing will only work for that specific value. Total width of the element is applied on the parent container.
<div class="segmented_controls">
	<input type="radio" name="segment" id="option_1" value="option_1">
		<label for="option_1">Option 1</label>
	<input type="radio" name="segment" id="option_2" value="option_2">
		<label for="option_2">Option 2</label>
	<input type="radio" name="segment" id="option_3" value="option_3">
		<label for="option_3">Option 3</label>
</div>

This shows default behavior with two options, with first being set to checked.
<div class="segmented_controls">
	<input type="radio" name="segment2" id="2option_1" value="option_1" checked>
		<label for="2option_1">Option 1</label>
	<input type="radio" name="segment2" id="2option_2" value="option_2">
		<label for="2option_2">Option 2</label>
</div>

This shows default behavior with two options, and is called with the sub-class <code>.two</code>. This option allows use where Flexbox cannot be employed.
<div class="segmented_controls two">
	<input type="radio" name="segment3" id="3option_1" value="option_1">
		<label for="3option_1">Option 1</label>
	<input type="radio" name="segment3" id="3option_2" value="option_2">
		<label for="3option_2">Option 2</label>
</div>

This shows default behavior with three options, and is called with the sub-class <code>.three</code>. This option allows use where Flexbox cannot be employed.
<div class="segmented_controls three">
	<input type="radio" name="segment4" id="4option_1" value="option_1">
		<label for="4option_1">Option 1</label>
	<input type="radio" name="segment4" id="4option_2" value="option_2">
		<label for="4option_2">Option 2</label>
	<input type="radio" name="segment4" id="4option_3" value="option_3">
		<label for="4option_3">Option 3</label>
</div>

This shows default behavior with four options, and is called with the sub-class <code>.four</code>. This option allows use where Flexbox cannot be employed.
<div class="segmented_controls four">
	<input type="radio" name="segment5" id="5option_1" value="option_1">
		<label for="5option_1">Option 1</label>
	<input type="radio" name="segment5" id="5option_2" value="option_2">
		<label for="5option_2">Option 2</label>
	<input type="radio" name="segment5" id="5option_3" value="option_3">
		<label for="5option_3">Option 3</label>
	<input type="radio" name="segment5" id="5option_4" value="option_3">
		<label for="5option_4">Option 4</label>
</div>