Introduction

The Switch component is used as an alternative for the Checkbox component. Except indeterminate and label are not supported.

Switch states

Hide code

Sizes

The Switch will work with any height you pass it. Although it’s only every used with: 16, 20 and 24.

Hide code
Hide code

Controlled usage

The Switch 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

Switch Props

This component composes ui-box

idstring
The id attribute of the radio.
namestring
The name attribute of the radio.
valuestring
The value attribute of the radio.
heightnumber
The height of the switch.
checkedbool
When true, the switch is checked (on).
onChangefunc
Function called when state changes.
disabledbool
When true, the switch is disabled.
isInvalidbool
When true, the switch is invalid.
appearancestring
The appearance of the checkbox. The default theme only comes with a default style.
hasCheckIconbool
When true, the switch has a check icon.
defaultCheckedbool
When true, the switch is true by default. This is for uncontrolled usage.