Introduction

The Checkbox component maps to a checkbox input and a label.

Checkbox states

Hide code

Controlled usage

The Checkbox component passes on the original event through the onChange handler. Use e.target.checked to get the latest value and update state accordingly.

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

Add margins

Hide code

Checkbox Props

This component composes ui-box

idstring
The id attribute of the checkbox.
namestring
The id attribute of the checkbox.
labelnode
Label of the checkbox.
valuestring
The value attribute of the checkbox.
checkedbool
The checked attribute of the checkbox.
indeterminatebool
State in addition to "checked" and "unchecked". When true, the checkbox displays a "minus" icon.
onChangefunc
Function called when state changes.
disabledbool
When true, the checkbox is disabled.
isInvalidbool
When true, the aria-invalid attribute is true. Used for accessibility.
appearancestring
The appearance of the checkbox. The default theme only comes with a default style.