Checkbox

Check boxes are usually used in groups. Allow users to select one or more values ​​from a set.

Import 

import { Checkbox, CheckboxGroup } from 'rsuite';

//or
import Checkbox from 'rsuite/Checkbox';
import CheckboxGroup from 'rsuite/CheckboxGroup';

Examples

Default

Disabled and read only

Indeterminate State

the indeterminate property is mainly used on the select all or tree structure checkbox.

Checkbox Group

Checkbox Group With Horizontal Layout

Checkbox Group (Controlled)

Accessibility

WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox

  • When checked, Checkbox has aria-checked set to true.
  • When not checked, Checkbox has aria-checked set to false.
  • When partially checked, Checkbox has aria-checked set to mixed.
  • If children is set, it will be wrapped in <label> together with Checkbox.

Props

<Checkbox>

Property Type (default) Description
checked boolean Specifies whether the checkbox is selected
defaultChecked boolean Specifies the initial state: whether or not the checkbox is selected
disabled boolean Whether disabled
id ElementType Custom element type for the component
indeterminate boolean When being a checkbox , setting styles after the child part is selected
inline boolean Inline layout
inputRef Ref Ref of input element
name string Used for the name of the form
onChange (value: ValueType, checked: boolean, event) => void Callback fired when checkbox is triggered and state changes
title string HTML title
value ValueType Correspond to the value of CheckboxGroup, determine whether to select

<CheckboxGroup>

Property Type (default) Description
defaultValue ValueType[] Default value
inline boolean Inline layout
name string Used for the name of the form
onChange (value:ValueType[], event) => void Callback fired when checkbox is triggered and state changes
value ValueType[] Value of checked box (Controlled)

ts:ValueType 

type ValueType = string | number;