CheckboxGroup

Type: React component

How to get CheckboxGroup?

JavaScript

import { CheckboxGroup } from 'fds/components';

A group of Checkbox components which allows multiple Checkbox components to be selected at the same time. This component is generally used to display a small set of multiple choice options. When a large set of items is present, consider using MultipleAutocomplete instead.

Props

  1. flexDirection

    (Optional)

    Type: String

    This specifies whether to render the check boxes below one another (using 'column') or next to one another (using 'row'). Defaults to 'column'. Note: CSS' column-reverse and row-reverse are not supported. If you want to reverse the order, simply reverse the order of the specified items array instead.

    Default value

  2. isDisabled

    (Optional)

    Type: Boolean

    Whether or not the component should be rendered in a disabled state.

    Default value

  3. items

    (Required)

    Type: Array

    An array of items for which a checkbox (icon) is rendered. Each item has a label and value property. The label property is required and can be either a string to render a Label or any valid ReactNode, which is rendered directly. This allows you to render any component as the label of a checkbox.

  4. name

    (Optional)

    Type: String

    The name of this component to identify it (and its value) when used inside an intelligent container component which aggregates its children (and/or their values), like a Form.

    Default value

  5. onChange

    (Optional)

    Type: Function

    A callback that is called whenever a component's value changes.

    This callback is called just before the "validate" prop is called.

    Use this callback to update local state which in turn should update the value prop of the component whose callback just fired.

    Arguments

    Default value

  6. validate

    (Optional)

    Type: Function

    A callback that is called directly after the value(s) of a form component change(s).

    Use this callback to check the selected value(s) against business rules and to set any feedback for the user based on this.

    Arguments

    Returns

    Default value

  7. values

    (Optional)

    Type: Array

    If a checkbox is checked, the value of the corresponding item is added to this list of values. To pre-select a checkbox, add its item value to this list initially. If a checkbox is unchecked, the value is removed from this list. If a checkbox becomes "indeterminate", its value is not added to this list. Note: you cannot specify the "indeterminate" state for items/Checkboxes in this component.

    Default value