Checkbox options

v.02a

Favourite animals? (select any that apply)

Dogs Cats Donkeys Horses Dolphins Sharks

Implementing this component

The Markup

				
	<form id="check-options-group">
		<fieldset class="checkbox-options t-neutral">
			<legend class="checkbox-options__title">Favourite animals? (select any that apply)</legend>
			<input class="checkbox-options__input" id="check_option1" type="checkbox" name="animals" value="Dogs" />
			<label class="checkbox-options__label" for="check_option1">Dogs</label>
			<input class="checkbox-options__input" id="check_option2" type="checkbox" name="animals" value="Cats" />
			<label class="checkbox-options__label" for="check_option2">Cats
			</label>
			<input class="checkbox-options__input" id="check_option3" type="checkbox" name="animals" value="Donkeys" />
			<label class="checkbox-options__label" for="check_option3">Donkeys</label>
			<input class="checkbox-options__input" id="check_option4" type="checkbox" name="animals" value="Horses" />
			<label class="checkbox-options__label" for="check_option4">Horses</label>
			<input class="checkbox-options__input" id="check_option5" type="checkbox" name="animals" value="Dolphins" />
			<label class="checkbox-options__label" for="check_option5">Dolphins</label>
			<input class="checkbox-options__input" id="check_option6" type="checkbox" name="animals" value="Sharks" />
			<label class="checkbox-options__label" for="check_option6">Sharks</label>
		</fieldset>
	</form>
				
			

The CSS: Theming

				
	/* Theming */
.t-neutral.checkbox-options input[type="checkbox"]:checked + label {
    background: #222;
    border-color: #333;
    color: #fff;
}

.high-contrast .checkbox-options input[type="checkbox"]:checked + label:before {
		background:#eee;
}

.t-neutral.checkbox-options input[type="checkbox"]:checked + label:before {
    transform: scale(1);
}

.t-neutral.checkbox-options input[type="checkbox"]:active + label {
    background: #444;
    color: #fff;
}

.t-neutral.checkbox-options input[type="checkbox"]:focus + label {
    background: #444;
    color: #fff;
}
.t-neutral .checkbox-options__label:before {
    background-image: url("../img/check_tick.svg");
    background-repeat: no-repeat;
    background-position: 0 0;
}
.t-neutral .checkbox-options__label {
    background: #eee;
    border-color: #111;
    color: #111;
}

.t-neutral .checkbox-options__label:hover {
    background: #333;
    color: #fff;
}

				
			

The CSS: Component

				
	.checkbox-options__label:before {
    content: "";
    display: block;
    height: 1em;
    left: 1em;
    /* This is a bit of a magic number here, you could vertically center any number of ways */
    top:42%;
    position: absolute;
    transform: scale(0);
    z-index:2;
    transition: transform 0.4s cubic-bezier(.59,-0.44,.4,1.47);
    width: 1.35em;
}

.checkbox-options__label {
    border: 1px solid;
    cursor: pointer;
    display: inline-block;
    padding: 3em;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease;

    @media all and (max-width:48em) {
        width: 100%;
    }
}


/* Qualifier, since technique requires
	adjacent selector,
		we use sibling to cut the mustard
	*/

.checkbox-options__title ~ .checkbox-options__input {
    left: -9999px;
    opacity: 0;
    position: absolute;
    visibility: none;
}

.high-contrast .checkbox-options__label:before {
	border:1px solid #fff;
	background:#222;
	transition:background 0.3s ease;
}
				
			

The SVG background image

				
<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="47.4px" height="19.4px" viewBox="-455 271.6 47.4 19.4" enable-background="new -455 271.6 47.4 19.4" xml:space="preserve">
     <style type="text/css">
        .svg-tick {
            fill:#fff;
        }
     </style>
    <g>
    	<rect class="svg-tick" x="-443.4" y="271" transform="matrix(-0.7026 -0.7116 0.7116 -0.7026 -950.1357 163.6479)"  width="5" height="18.8"/>
    	<rect class="svg-tick" x="-450.6" y="277" transform="matrix(0.7116 -0.7026 0.7026 0.7116 -327.969 -233.2623)" width="5" height="11.7"/>
    </g>
</svg>

				
			

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.