Checkbox

yarn add @clayui/form

A checkbox is a component that lets the user select the value that is written in its corresponding text label. A user can select multiple checkboxes from a group at the same time.

Stable 3.14.2 View in Lexicon CHANGELOG

Read Only
Container Props
Label
Inline
Indeterminate

Use checked property to check or not the checkbox.

To set a callback function when the value of the checkbox is changed, use onChange property. See the following example:

Code Sample (expand to see it)

Here you can see some options or ideas on how to extend our Checkbox component to fit your use:

Read Only

If you want a checkbox without actions on change(or just not use onChange property), use readOnly property.

Code Sample (expand to see it)

Container Props

If you want to modify the container that wraps the checkbox, use containerProps:

Code Sample (expand to see it)

Label

Use label property to describe what the checkbox is for.

Option 1

Code Sample (expand to see it)

Inline

Group checkboxes on the same horizontal row by using inline property.

Option 1

Option 2

Option 3

Code Sample (expand to see it)

Indeterminate

Use indeterminate property for making the checkbox indeterminate.

Code Sample (expand to see it)