EvoToolkit - v3.7.2 (Changelog)

Checkbox

Checkbox component to be used when you need to use a checkbox or radio input. They are wrapped in the grey box to give them a bigger surface area, making them easier to use on smaller screens.

Source

Contributors

Luke Harrison
  • Overview
  • Methods
  • Theming

Table of contents

Base

Modifiers

States

Base

Checkbox Input

Standard checkbox component, in this instance using a checkbox input.

<label class='c-checkbox' tabindex='0'>
	<input type='checkbox' name='confirm' tabndex='-1'>
	<span class='c-checkbox__cover'></span>
	<span class='c-checkbox__box'>
		<svg class='c-checkbox__box-icon'><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick" /></svg>
	</span>
	<span class='c-checkbox__label'>By checking this box you confirm the details above are correct.</span>
</label>

Validation

To validate a collection of radio checkbox components, you have to first wrap in a c-checkbox-group component. Next, add a required attribute to every input element, then add a data-valuemissing attribure to the block element so you can set an error message which shows if the form is submitted without a checked option.

Error
<form>
	<fieldset>
		<div class="o-layout c-checkbox-group" data-valuemissing="Please select a car">
			<div class="o-layout__item u-width-12/12 u-width-6/12@sm2 u-width-shrink@md u-mb-small">
				<label class="c-checkbox" tabindex="0">
					<input type="radio" name="car" value="Audi" tabindex="-1" required>
					<span class="c-checkbox__cover"></span>
					<span class="c-checkbox__box"></span>
					<span class="c-checkbox__label">Audi</span>
				</label>
			</div>
			<div class="o-layout__item u-width-12/12 u-width-6/12@sm2 u-width-shrink@md u-mb-small">
				<label class="c-checkbox" tabindex="0">
					<input type="radio" name="car" value="BMW" tabindex="-1" required>
					<span class="c-checkbox__cover"></span>
					<span class="c-checkbox__box"></span>
					<span class="c-checkbox__label">BMW</span>
				</label>
			</div>
			<div class="o-layout__item u-width-12/12 u-width-6/12@sm2 u-width-shrink@md u-mb-small">
				<label class="c-checkbox" tabindex="0">
					<input type="radio" name="car" value="Ford" tabindex="-1" required>
					<span class="c-checkbox__cover"></span>
					<span class="c-checkbox__box"></span>
					<span class="c-checkbox__label">Ford</span>
				</label>
			</div>
			<div class="o-layout__item u-width-12/12 u-width-6/12@sm2 u-width-shrink@md u-mb-small">
				<label class="c-checkbox" tabindex="0">
					<input type="radio" name="car" value="Vauxhall" tabindex="-1" required>
					<span class="c-checkbox__cover"></span>
					<span class="c-checkbox__box"></span>
					<span class="c-checkbox__label">Vauxhall</span>
				</label>
			</div>
			<div class="o-layout__item c-checkbox-group__text c-checkbox-group__text--error u-mb-small">Error</div>
		</div>
		<div class="o-layout">
			<div class='o-layout__item'>
				<button class="c-button c-button--small">Submit</button>
			</div>
		</div>
	</fieldset>
</form>

Modifiers

A list of modifiers for the checkbox component, allowing you to change its appearance to fit a variety of roles and scenarios.

Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.

Sizes

<label class='c-checkbox u-mb-small' tabindex='0'>
	<input type='checkbox' name='confirm' tabndex='-1'>
	<span class='c-checkbox__cover'></span>
	<span class='c-checkbox__box'>
		<svg class='c-checkbox__box-icon'><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick" /></svg>
	</span>
	<span class='c-checkbox__label'>Standard checkbox</span>
</label>

<label class='c-checkbox c-checkbox--small u-mb-small' tabindex='0'>
	<input type='checkbox' name='confirm' tabndex='-1'>
	<span class='c-checkbox__cover'></span>
	<span class='c-checkbox__box'>
		<svg class='c-checkbox__box-icon'><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick"/></svg>
	</span>
	<span class='c-checkbox__label'>Small checkbox</span>
</label>


<label class='c-checkbox c-checkbox--large' tabindex='0'>
	<input type='checkbox' name='confirm' tabndex='-1'>
	<span class='c-checkbox__cover'></span>
	<span class='c-checkbox__box'>
		<svg class='c-checkbox__box-icon'><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick" /></svg>
	</span>
	<span class='c-checkbox__label'>Large checkbox</span>
</label>

Inline

Checkboxes behave like standard inline elements, allowing for horizontal stacking

<label class="c-checkbox c-checkbox--inline u-mr-small" tabindex="0">
	<input type="checkbox" name="confirm1" tabndex="-1">
	<span class="c-checkbox__cover"></span>
	<span class="c-checkbox__box">
		<svg class="c-checkbox__box-icon"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick" /></svg>
	</span>
	<span class="c-checkbox__label">Inline Checkbox</span>
</label>

<label class="c-checkbox c-checkbox--inline" tabindex="0">
	<input type="checkbox" name="confirm2" tabndex="-1">
	<span class="c-checkbox__cover"></span>
	<span class="c-checkbox__box">
		<svg class="c-checkbox__box-icon"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick" /></svg>
	</span>
	<span class="c-checkbox__label">Inline Checkbox</span>
</label>

Bare

<label class="c-checkbox c-checkbox--bare" tabindex="0">
	<input type="checkbox" name="confirm" tabndex="-1">
	<span class="c-checkbox__cover"></span>
	<span class="c-checkbox__box">
		<svg class="c-checkbox__box-icon"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick" /></svg>
	</span>
	<span class="c-checkbox__label">Bare Checkbox</span>
</label>

States

This checkbox component has multiple states available. These can also be combined with any combination of modifiers, unless stated otherwise.

Most states are also activated when a parent component has the same state applied. For example, if a fieldset element is disabled or has an is-disabled class, this will also activate the disabled state for all its child components with states available.

This behaviour can be disabled by adding a --disable-state-inheritance modifier class to the element inheriting the state (For example, for c-button, the class would be c-button--disable-state-inheritance).

Disabled

To be used if the component needs to be disabled. This state can also be activated if the component is a child of a disabled component, or a child of a component with the is-disabled class.

<label class='c-checkbox is-disabled' tabindex='0'>
	<input type='checkbox' name='confirm' tabndex='-1' disabled>
	<span class='c-checkbox__cover'></span>
	<span class='c-checkbox__box'>
		<svg class='c-checkbox__box-icon'><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#tick" /></svg>
	</span>
	<span class='c-checkbox__label'>By checking this box you confirm the details above are correct.</span>
</label>

This component has methods which allow you to programatically trigger actions. You can trigger these using the evo() selector.

See JavaScript API for more information and a list of shared, global methods.

toggle

Checks the selected checkbox.


												evo('.js-my-checkbox').checkbox('toggle');

// Toggles a checkbox only if the input element within it matches the selector in the 'input' option
evo('.js-my-checkbox').checkbox('toggle', {
	input: '[name="checkbox-name"]'
});

You can theme the checkbox component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.

Below is a list of theme variables and their default values.

Theme Variables

Theme Variables Default
$component-checkbox-color very-light
$component-checkbox-accent-color primary