Checkbox

Checkboxes let users choose multiple options from a list.
Use the fieldset component to give checkbox groups an accessible label.

Demo

<div class="eds-c-form">
    {{> eds-c-checkbox}}
</div>

When to use this component

Use the Checkbox component when users need to select 1 or more option from a list.

You can also use the Checkbox to let users turn a single option on or off.

When not to use this component

Do not use checkboxes when users can only choose 1 option. Instead, use the Radios component.

How it works

Place checkboxes to the left of their label. This makes them easy to find, particularly for people using screen magnification.

If you are allowing users to choose more than 1 option, do not assume they will know this. Consider using hint text such as 'Select all that apply'.

Installation

To install the components, go to the get started guide for developers.

To use the Checkbox component, enter the following command in your Terminal:

npm install @springernature/elements

Styles

First, import the styles of the Form component:

@import '../path/to/@springernature/elements/components/eds-c-form';

Then, import the styles of the Checkbox component into your scss file:

@import '../path/to/@springernature/elements/components/eds-c-checkbox';

Templates

Use the Checkbox component together with the EDS Form component.

Use the form template and read the schema file.

You can pass the Checkbox component in the inputs array as many times as you need.

Configuration

Properties

For more detailed information on how to use the properties correctly, go to the checkbox schema file.

Pass this property to the label object:

"cssClass": "eds-c-checkbox__label"

For more information on the label object, go to the label schema file.

Help improve this page

If you’ve got a question, idea or suggestion about how to improve this component or guidance,
post in the #ask-elements Slack channel.