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.
Standard checkbox component, in this instance using a checkbox input.
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.
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.
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
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
This component has methods which allow you to programatically trigger actions. You can trigger these using the
Checks the selected checkbox.
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.