Checkbox

ARIA
RTL

The checkbox is shown as a square box that is ticked (checked) when activated.

Checkboxes are used to let a user select one or more options of a limited number of choices.

Checkbox

Default

With Label

Checked

Disabled

ReadOnly

Partially selected

Customization

Checkbox props

NameTypeRequiredDefaultDescription
ariaLabelstringNo-ARIA description of checkbox
bgColorstringNobg-piccoloChecked state of checkbox
checkedbooleanNofalseChecked state of checkbox
disabledbooleanNofalseDisables checkbox
idstringNo-Unique id of checkbox
labelJSX.Element | stringNo-Describes checkbox's purpose
onChange(event) => voidNo-Change event handler
onClick(event) => voidNo-Click event handler
readOnlybooleanNofalseValue of checkbox can't be changed
indeterminatebooleanNo-Set checkbox as indeterminate and does not modify the checked state