Radio options

v.02a

Pick an amount to donate

$15 $35 $50 $100 $250 $500

Implementing this component

The Markup

				
	<form id="radio-options-group">
        <fieldset class="radio-options t-neutral">
            <legend class="radio-options__title">Pick an amount to donate</legend>
            <div class="radio-options__inner l-grid-parent">
                <input class="radio-options__input" id="radio_option1" type="radio" name="amount" value="$15" checked />
                <label class="radio-options__label" for="radio_option1">$15</label>
                <input class="radio-options__input" id="radio_option2" type="radio" name="amount" value="$35" />
                <label class="radio-options__label" for="radio_option2">$35</label>
                <input class="radio-options__input" id="radio_option3" type="radio" name="amount" value="$50" />
                <label class="radio-options__label" for="radio_option3">$50</label>
                <input class="radio-options__input" id="radio_option4" type="radio" name="amount" value="$100" />
                <label class="radio-options__label" for="radio_option4">$100</label>
                <input class="radio-options__input" id="radio_option5" type="radio" name="amount" value="$250" />
                <label class="radio-options__label" for="radio_option5">$250</label>
                <input class="radio-options__input" id="radio_option6" type="radio" name="amount" value="$500" />
                <label class="radio-options__label" for="radio_option6">$500</label>
            </div>
        </fieldset>
    </form>
				
			

The CSS: Theming

				
  	/* Theming */
    .t-neutral.radio-options input[type="radio"]:checked + label {
        background: #222;
        color: #fff;
    }
    .t-neutral.radio-options input[type="radio"]:active + label {
        color: #555;
    }
    .t-neutral.radio-options input[type="radio"]:focus + label {
        color: #555;
    }
    .t-neutral .radio-options__label {
        background: #ddd;
        border-color: #222;
        color: #111;
    }
    .t-neutral .radio-options__label:hover {
        background: #555;
        color: #fff;
    }
    .t-neutral .radio-options__label:focus,
    .t-neutral .radio-options__label:active {
        background: #555;
        color: #fff;
    }
				
			

The CSS: Component

				
    /* Component */
    .radio-options__label {
        display: inline-block;
        cursor: pointer;
        padding: 0.5em 0.75em;
        border: 1px solid;
        text-align: center;
        text-decoration: none;
    }
    /*
    this is a qualifier to make sure we don't cut out browsers
    without adjacent/sibling selectors.
    For those browsers they get the same label apperance but with a radio button next to it.
    */
    .radio-options__title + .radio-options__inner .radio-options__input {
        left: -9999px;
        opacity: 0;
        position: absolute;
        visibility: none;
    }

    @media all and (min-width:40em){
        .radio-options__label {
            padding: 3em;
        }
    }
				
			

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.