Skip to content
4.3.5

Checkbox

Checkboxes are used for a list of options when a user can select more than one option. Checkboxes can also be used to turn an option on and off.

Installation

bash
npm install @nib-components/checkbox

As a form input, @nib-components/form-control must wrap this component to provide an accessible label, help text, and validation styling.

Usage

jsx
import Checkbox from '@nib-components/checkbox';

Interactive demo

Do you agree to the terms and conditions?
jsx

Props

As the <Checkbox/> is wrapped in a <FormControl/>, all FormControl props such as valid, validated, and disabled will be passed down to this component. This includes the id, name and label which will align with the for attribute on the <label>.

All props passed directly to <Checkbox/> will be applied to the underlying <input> as attributes.

PropTypeDefaultDescription
value (required)stringThe checkbox input value.
label (required)stringThe checkbox input label.
checkedbooleanfalseWhether the input is selected.

Target

The user can select the checkbox by clicking the checkbox directly or by clicking on its label. Therefore links cannot be included in checkbox labels. The target container height for each checkbox option is 56px. This large target size makes it easy for users to select/unselect the option, even if they are using a touch screen device or have limited dexterity.

Default selection

By default, all checkboxes are unchecked. Requiring the user to select the relevant options reduces data entry errors.

Checkbox container length and display

On desktop and ipad devices the length of the checkbox option container will be dependant on the length of the text; the container padding remains the same.

Checkbox options are displayed inline by default. This can be toggled via the inline prop.

On mobile and small screens (480px of less) checkbox options are full-width and stacked. This allows users to easily reach and select options.

Stacked, full-width checkboxes on small screens

Labels

Labels help the user understand what options to select. Labels are short, concise and use sentence-style capitalisation.

Optional controls

Denote optional controls by adding “(Optional)" to the end of the label.

Improvement

We would like to add an "optional" prop to our "FormControl" that appends this string automatically to ensure consistency.

If you'd like to help with this we would welcome a PR.

Help text

Help text is an instruction that supports a user to make an accurate selection. It can also be used to clarify how the information will be used. It is optional and should only be used where needed.

Help text should appear below the label and above the checkbox options. Use sentence-style capitalisation and concise sentence/s.

Accessibility best practices for help text:

Help text displayed above the checkbox options allows screen readers to read the help information before the user makes a selection.