Custom Forms - Segmented Control

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.