Checkbox
In a set of data, the user can select one or more items through the Checkbox.
Install
npm install @arco-design/web-react@2.66.18
Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.
Examples
- Basic: Basic usage.
- Disabled: Disable the checkbox.
- Controlled: Control whether the check box is selected
- Checkbox group: Generate a group of checkboxes. If direction is
vertical, the vertical checkbox group will be displayed. - Check all: The indeterminate effect can be achieved with
indeterminate=true - Layout: We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.
- Custom Icon: Customize the selected icon through the
iconproperty. - Custom Render Checkbox: Render nodes can be customized by passing a function of type 'children'(
v2.29.0)。. - useCheckbox:
useCheckboxhook offers an efficient way to manage checkbox state.
Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.
API
Checkbox
T = string | number
| Property | Description | Type | DefaultValue | Version |
|---|---|---|---|---|
| checked | Whether the checkbox is checked | boolean | - | - |
| defaultChecked | To set default checked | boolean | - | - |
| disabled | Whether to disable | boolean | - | - |
| error | Whether to show in error style | boolean | - | - |
| indeterminate | The indeterminate state of checkbox | boolean | - | - |
| icon | Custom IconCheck | ReactNode | - | 2.43.0 |
| className | Additional css class | string | string[] | - | - |
| style | Additional style | CSSProperties | - | - |
| value | To set checkbox value | T | - | - |
| onChange | Callback when the state changes | (checked: boolean, e: Event) => void | - | - |
Checkbox.Group
| Property | Description | Type | DefaultValue |
|---|---|---|---|
| disabled | Whether to disable all checkboxes in the group | boolean | - |
| direction | Arrangement direction | 'horizontal' | 'vertical' | horizontal |
| className | Additional css class | string | string[] | - |
| defaultValue | Initial selected value | T[] | - |
| options | Specifies options | (T | { label: ReactNode; value: T; disabled?: boolean; icon?: ReactNode })[] | - |
| style | Additional style | CSSProperties | - |
| value | To set value | T[] | - |
| onChange | Callback when the state changes | (value: T[], e: Event) => void | - |
Checkbox.useCheckbox
/** T = string | number */
const result: ResultType = Checkbox.useCheckbox<T>(values: T[], defaultSelected?: T[]);
ResultType
| Property | Description | Type |
|---|---|---|
| selected | Currently selected items | T[] |
| setSelected | Only select the incoming options | (value: T[]) => void; |
| setValueSelected | Set the checked state of the Checkbox, the second param is the state to be set. | (value: T | T[], selected?: boolean) => void; |
| selectAll | Selected all checkboxes | () => void; |
| unSelectAll | Unselected all checkboxes | () => void; |
| isSelected | Whether the option is selected | (value: T) => boolean; |
| toggle | Toggle checked state. When no params, the checked state of all options will be switched | (value?: T | T[]) => void; |
| isAllSelected | Whether all options are selected | () => boolean; |
| isPartialSelected | Whether only some options are selected | () => boolean; |