EvoToolkit - v3.0.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

Table of contents

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-a9f6d11dc7.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 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-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">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="/static/img/evotoolkit-a9f6d11dc7.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