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

Switch states

  <Switch marginBottom={16} />
  <Switch marginBottom={16} checked />
  <Switch marginBottom={16} disabled />
  <Switch marginBottom={16} disabled checked />
Hide code


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

<Switch height={20} checked />
Hide code
<Switch height={24} checked />
Hide code

Controlled usage

The Switch component passes on the original event through the onChange handler. Use 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.
<Component initialState={{ checked: true }}>
  {({ state, setState }) => (
      onChange={e => setState({ checked: })}
Hide code

Add margins

Hide code

The properties table for this component can’t be rendered at the moment, due to a bug.