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
is
Disabled (Optional)
Type: Boolean
Whether or not the component should be rendered in a disabled state.
Default value
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
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
on
Change (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
tooltip
Content (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
-
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
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