Form Checkbox component
An input that shows the site visitor if the option is selected or not.
Checkboxes can be used when a site visitor to select one or more options from a list in a form.
When to use
.vf-form__checkbox when you want the site visitor to select 0, 1 or multiple options from the predefined list of checkboxes.
When not to use
Do not use the
.vf-form__checkbox when you need a site visitor to only pick one option from the available selection. For this use case you should use the vf-radio button component.
vf-form__checkbox must be accompanied by a
vf-form__label inside a
vf-form__item with the
You can also use the
vf-form__helper to add some more descriptive, explanitory text under the
vf-form__label. See the examples for the correct markup.
.vf-form__checkbox needs to grouped into a
vf-form__fieldset and using the
vf-form__label to help the site visitor understand what they are choosing for.
vf-form__fieldset will use the
vf-stack layout component to stack the
vf-form__checkbox on top of each other. You can set these to be inline by using the
vf-cluster layout component as well. See the examples for the correct markup.
This component is distributed with npm. After installing npm, you can install the
.vf-form__checkbox with this command.
$ yarn add --dev @visual-framework/vf-form__checkbox
The source files included are written in Sass(
scss). You can point your Sass
include-path at your
node_modules directory and import it like this.
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the