Switch

Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting.

Low power mode

children

size

isEmphasized

import {Switch} from '@react-spectrum/s2';

<Switch>Low power mode</Switch>

Selection

Use the isSelected or defaultSelected prop to set the selection state, and onChange to handle selection changes.

Low power mode

High power mode active.

import {Switch} from '@react-spectrum/s2';
import {useState} from 'react';

function Example(props) {
  let [selected, setSelection] = useState(false);

  return (
    <>
      <Switch 
        {...props}
        isSelected={selected}
        onChange={setSelection}
      >
        Low power mode
      </Switch>
      <p>{selected ? 'Low' : 'High'} power mode active.</p>
    </>
  );
}

Forms

Use the name and value props to submit the switch to the server. See the Forms guide to learn more.

import {Switch, Button, Form} from '@react-spectrum/s2';

<Form>
  <Switch name="wifi">Wi-Fi</Switch>
  <Button type="submit">Submit</Button>
</Form>

API

Name	Type	Default
`children`	`ReactNode`	Default: —
`inputRef`	`RefObject<HTMLInputElement \| null>`	Default: —
A ref for the HTML input element.
`defaultSelected`	`boolean`	Default: —
Whether the Switch should be selected (uncontrolled).
`isSelected`	`boolean`	Default: —
Whether the Switch should be selected (controlled).
`isDisabled`	`boolean`	Default: —
Whether the input is disabled.
`isReadOnly`	`boolean`	Default: —
Whether the input can be selected but not changed by the user.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.
`size`	`'S' \| 'M' \| 'L' \| 'XL'`	Default: `'M'`
The size of the Switch.
`isEmphasized`	`boolean`	Default: —
Whether the Switch should be displayed with an emphasized style.

`onChange`	`(isSelected: boolean) => void`	Default: —
Handler that is called when the Switch's selection state changes.