Switch

import {Switch} from '@gravity-ui/uikit';

The Switch component is used to toggle between two states: typically, between on and off, or enabled and disabled.

§States

A Switch can have different states:

• Checked: When the switch has the On state.
• Disabled: When the switch is unavailable.

<Switch size="l" checked={false}>Unchecked</Switch>
<Switch size="l" checked>Checked</Switch>
<Switch size="l" disabled>Disabled</Switch>

§Size

Use the size property to manage the Switch size. The default size is m.

<Switch size="s">S Size</Switch>
<Switch size="m">M Size</Switch>
<Switch size="l">L Size</Switch>

§Label

You can assign a label to a Switch using the content property or provide it as a child property.

<div>
  <Switch content="Content" size="l" />
  <div
    style={{
      marginTop: 10,
    }}
  >
    <Switch size="l">
      <span>Content as children</span>
    </Switch>
  </div>
</div>

§Properties