React Aria
DocsReleasesBlog
React Aria

Switch

A switch allows a user to turn a setting on or off.

Theme 
 
isDisabled 
Example
Switch.tsx
Switch.css
import {Switch} from './Switch';

<Switch>Low power mode</Switch>

Selection

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

High power mode active.

import {Switch} from './Switch';
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} from './Switch';
import {Button} from './Button';
import {Form} from './Form';

<Form>
  <Switch name="wifi">Wi-Fi</Switch>
  <Button type="submit" style={{marginTop: 8}}>Submit</Button>
</Form>

API

Shows a switch component with labels pointing to its parts, including the input, and label elements.Low power modeInputLabel 
<Switch>Label</Switch>

Switch

NameType
inputRef<HTMLInputElement | null>
A ref for the HTML input element.
defaultSelectedboolean
Whether the Switch should be selected (uncontrolled).
isSelectedboolean
Whether the Switch should be selected (controlled).
isDisabledboolean
Whether the input is disabled.
isReadOnlyboolean
Whether the input can be selected but not changed by the user.
children<>
The children of the component. A function may be provided to alter the children based on component state.
onChange(isSelected: boolean) => void
Handler that is called when the Switch's selection state changes.

Default className: react-aria-Switch

Render PropCSS Selector
isSelectedCSS Selector: [data-selected]
Whether the switch is selected.
isHoveredCSS Selector: [data-hovered]
Whether the switch is currently hovered with a mouse.
isPressedCSS Selector: [data-pressed]
Whether the switch is currently in a pressed state.
isFocusedCSS Selector: [data-focused]
Whether the switch is focused, either via a mouse or keyboard.
isFocusVisibleCSS Selector: [data-focus-visible]
Whether the switch is keyboard focused.
isDisabledCSS Selector: [data-disabled]
Whether the switch is disabled.
isReadOnlyCSS Selector: [data-readonly]
Whether the switch is read only.
stateCSS Selector: —
State of the switch.

Related pages