EvoToolkit - v2.3.0 (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

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="#tick" /></svg> </span> <span class='c-checkbox__label'>By checking this box you confirm the details above are correct.</span> </label>

This component requires an icon, so copy the below symbol into your root svg element If using EvoToolkit boilerplate, this is the empty <svg> just after the opening <body>. . You can also download the SVG directly for use in design apps.

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 o-layout--inline@sm 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-margin-bottom-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-margin-bottom-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-margin-bottom-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-margin-bottom-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-margin-bottom-small">Error</div> </div> <div class="o-layout"> <div class='o-layout__item'> <button class="c-button">Submit</button> </div> </div> </fieldset> </form>

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="#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 info.

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