Switch

size
content
checked
disabled
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="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

NameDescriptionTypeDefault
childrenThe content of the switch (usually, a label)ReactNode
contentThe content of the switch (alternative to children)ReactNode
disabledToggles the disabled state of the switchbooleanfalse
checkedToggles the checked state of the switchbooleanfalse
defaultCheckedSets the initial checked state when the component is mountedbooleanfalse
onUpdateFires when the switch state is changed by the user and provides the checked value as a callback argument(checked: boolean) => void
onChangeFires when the switch state is changed by the user and provides the change event as a callback argumentFunction
onFocusEvent handler to use when the switch input element receives focusFunction
onBlurEvent handler to use when the switch input element loses focusFunction
sizeSets the size of the switchm lm
idid HTML attributestring
qadata-qa HTML attribute, used for testingstring
stylestyle HTML attributeReact.CSSProperties
classNameclass HTML attributestring
titletitle HTML attributestring
namename HTML attribute for the input elementstring
valuevalue HTML attribute for the input elementstring
indeterminateToggles the indeterminate state of the switchbooleanfalse
controlPropsAdditional propeties for the underlying input elementReact.InputHTMLAttributes<HTMLInputElement>
controlRefRef to the underlying input elementReact.Ref<HTMLInputElement>