Checkbox

Type: React component

How to get Checkbox?

JavaScript

import { Checkbox } from 'fds/components';

Toggles a single boolean value, rendering a square border, and a check mark when checked (true). It can also be (programmatically) set to the "indeterminate" state (by specifying "indeterminate" as its value). This is rendered as a square border with a minus sign in it.

When you need to implement multiple Checkbox components for the same piece of data (selecting several options in a list), consider using a CheckboxGroup instead.

Keyboard behavior:

  • Enter: call the onChange prop when focused and isDisabled is false.

Props

  1. isDisabled

    (Optional)

    Type: Boolean

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

    Default value

  2. label

    (Optional)

    Type: Any

    Either a string, for which a Label component is used to render that string, or any valid ReactNode, which is rendered directly.

    Default value

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

  4. onChange

    (Required)

    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

  5. tooltipContent

    (Optional)

    Type: String | ReactElement

    The content of the tooltip that is displayed when hovering over the whole component.

    • string: the textual content of the tooltip

    • ReactElement: a React Element (instance of a React Component, usually created with JSX)

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

    (Optional)

    Type: Boolean | String

    Either true or false (booleans) or "indeterminate" (string), defaults to false. When toggling a checkbox that is "indeterminate" it becomes true. Note: you can use the const Checkbox.VALUE_INDETERMINATE to ensure you spell "indeterminate" correctly.

    Default value