Noodle Printing Machine


    3.0.0-alpha.0 • Public • Published

    Form Checkbox component

    npm version


    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

    Use the .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.


    A vf-form__checkbox must be accompanied by a vf-form__label inside a vf-form__item with the vf-form__item--checkbox variant.

    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.

    The .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.

    Generally the 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.

    @import "@visual-framework/vf-form__checkbox/index.scss";

    Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter



    npm i @visual-framework/vf-form__checkbox

    DownloadsWeekly Downloads





    Apache 2.0

    Unpacked Size

    47.2 kB

    Total Files


    Last publish


    • ebiwebdev
    • nitinja
    • sandykadam
    • khawkins98