Switch

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

Low power mode

children

isDisabled

Example

Switch.tsx

Switch.css

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.

Low power mode

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 'react-aria-components';

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

Switch

Selection

Forms

API