Segmented control

v0.2a

Pick an option

Option 1 Option 2 Option 3

Implementing this component

The Markup

				
	<form id="radio-segmented-control" class="t-neutral">
		<fieldset class="segmented-control">
			<legend class="segmented-control__title">Pick an option</legend>
			<input class="segmented-control__input" id="radio_option1" type="radio" name="segment" value="Option 1" />
			<label class="segmented-control__label segmented-control__label--start l-grid-33" for="radio_option1">Option 1</label>
			<input class="segmented-control__input" id="radio_option2" type="radio" name="segment" value="Option 2" />
			<label class="segmented-control__label l-grid-33" for="radio_option2">Option 2</label>
			<input class="segmented-control__input" id="radio_option3" type="radio" name="segment" value="Option 3" checked="true" />
			<label class="segmented-control__label segmented-control__label--end l-grid-33" for="radio_option3">Option 3</label>
		</fieldset>
	</form>
				
			

CSS: Theming

				
	/* Theming */

	/* If the current object is clicked/tapped */
.t-neutral .segmented-control input[type="radio"]:checked + label {
    background: #180f0b;
    border-color: #20120a;
    color: #fff;
}

/* If the control has keyboard focus */
.t-neutral .segmented-control input[type="radio"]:focus + label {
    background: #444;
    color: #fff;
    outline:thin dotted;
}
.t-neutral .segmented-control input[type="radio"]:active + label {
    color: #fff;
}

.t-neutral .segmented-control__label {
	border-bottom: 1px solid #180f0b;
    border-top: 1px solid #180f0b;
	background: #eee;
	color: #111;
}

.t-neutral .segmented-control__label {
	border-color: #111;
}
				
			

CSS: Layout

				
/* layout */
.l-grid-33 {
	float:left;
	width: 33.333%;
}
				
			

CSS: Component

				
	/* Component */
.segmented-control__label {
	box-sizing: border-box;
    cursor: pointer;
    display: block;
    padding: 0.5em 0.75em;
    text-align: center;
    text-decoration: none;
    transition: background 0.4s ease, color 0.4s ease;
}
@media all and (min-width: 40em) {
	.segmented-control__label {
		padding: 0.75em;
	}
}

/* we'll use a sibling selector here to make sure
 that if we're going to hide the input,
 it'll only be on browsers that can handle the styling
*/
.segmented-control__title ~ .segmented-control__input {
    left: -9999px;
    opacity: 0;
    position: absolute;
    visibility: none;
}

.segmented-control__label--start {
	border: 1px solid;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 0;
}
.segmented-control__label--end {
	border:1px solid;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 5px;
}
				
			

About the component

TBD.

Screen Readers

Apple Voiceover

TBD.

JAWS

TBD.

NVDA

TBD.

Keyboard control

TBD.

High Contrast

TBD.

Inputs

TBD.

Cross browser notes

TBD.

Cross device notes

TBD.