Switch.mdx

import {Layout} from '../../src/Layout'; export default Layout;

import docs from 'docs:react-aria-components'; import {Switch as VanillaSwitch} from 'vanilla-starter/Switch'; import {Switch as TailwindSwitch} from 'tailwind-starter/Switch'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/switch/docs/anatomy.svg';

export const tags = ['toggle', 'input'];

Switch

{docs.exports.Switch.description}

Selection

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

"use client";
import {Switch} from 'vanilla-starter/Switch';
import {useState} from 'react';

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

  return (
    <>
      <Switch 
        {...props}
        ///- begin highlight -///
        isSelected={selected}
        onChange={setSelection}
        ///- end highlight -///
      >
        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.

"use client";
import {Switch} from 'vanilla-starter/Switch';
import {Button} from 'vanilla-starter/Button';
import {Form} from 'react-aria-components';

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

API

<Switch>Label</Switch>

Switch