Checkbox
Commonly used checkboxes
<Checkbox><CheckboxGroup>
Usage
import { Checkbox, CheckboxGroup } from 'rsuite';Examples
Default
Disabled
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)
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 | React.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 | React.Ref | Ref of input element |
| name | string | Used for the name of the form |
| onChange | (value: any, checked: boolean, event: SyntheticInputEvent) => void | Callback fired when checkbox is triggered and state changes |
| title | string | HTML title |
| value | any | Correspond to the value of CheckboxGroup, determine whether to select |
<CheckboxGroup>
| Property | Type (default) |
Description |
|---|---|---|
| defaultValue | Array | Default value |
| inline | boolean | Inline layout |
| name | string | Used for the name of the form |
| onChange | (value:any,event) => void | Callback fired when checkbox is triggered and state changes |
| value | Array | Value of checked box (Controlled) |