Switch

View on GitHub

Introduction

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

Switch states

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

Sizes

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 />
code Hide code
<Switch height={24} checked />
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.
<Component initialState={{ checked: true }}>
  {({ state, setState }) => (
    <Switch
      checked={state.checked}
      onChange={e => setState({ checked: e.target.checked })}
    />
  )}
</Component>
code Hide code

Add margins

<Switch
  checked
  marginBottom={40}
/>
code Hide code

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