Checkbox Group
A checkbox group can be used when there are multiple checkbox options available. If a single option is needed, consider a checkbox. When a user is restricted to choosing one option from many options available, consider using a radio group.
Installation
npm install @nib-components/checkbox-group
As a form input, @nib-components/form-control must wrap this component to provide an accessible label, help text, and validation styling.
Usage
import CheckboxGroup from '@nib-components/checkbox-group';
Interactive demo
Props
As the <CheckboxGroup/>
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 <CheckboxGroup/>
will be applied to the underlying <input>
as attributes.
Prop | Type | Default | Description |
---|---|---|---|
options (required) | object | An object, with the key mapping to the checkbox value, and the value mapping to the checkbox label. | |
value | array | [] | An array of selected values. |
component | string or React component | Checkbox | The component used to render a checkbox. |
Considerations
When only one selection is required, consider using the Radio Group component.
Usability
Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn’t uncheck the others. If a user must select exactly one choice, consider Radio Group.
Accessibility
All input fields need to have a label and the label is linked to the form field using the id attribute. Note that the name attribute is also important for radio buttons and checkboxes to maintain the groupings. The inputs should have tab indexing in sequential order.