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. Set the isRequired prop to validate the user selects the switch, or implement custom client or server-side validation. See the Forms guide to learn more.

Your organization requires two-factor authentication.
import {Switch} from './Switch';
import {Button} from './Button';
import {Form} from './Form';

<Form>
  <Switch
    name="two-factor"
    isRequired
    description="Your organization requires two-factor authentication.">
    Two-factor authentication
  </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 
<SwitchField>
  <SwitchButton>Label</SwitchButton>
  <Text slot="description" />
  <FieldError />
</SwitchField>

SwitchField

A switch allows a user to turn a setting on or off, with support for validation and help text.

NameType
inputRef<HTMLInputElement | null>

A ref for the HTML input element.

defaultSelectedboolean

Whether the element should be selected (uncontrolled).

isSelectedboolean

Whether the element 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 element's selection state changes.

Default className: react-aria-SwitchField

Render PropCSS Selector
isSelectedCSS Selector: [data-selected]
Whether the switch is selected.
isDisabledCSS Selector: [data-disabled]
Whether the switch is disabled.
isReadOnlyCSS Selector: [data-readonly]
Whether the switch is read only.
isInvalidCSS Selector: [data-invalid]
Whether the switch invalid.
isRequiredCSS Selector: [data-required]
Whether the switch is required.
stateCSS Selector: —
State of the switch.

SwitchButton

A switch button is the clickable area of a switch, including the indicator and label.

NameType
children<>

The children of the component. A function may be provided to alter the children based on component state.

Default className: react-aria-SwitchButton

Render PropCSS Selector
isInvalidCSS Selector: [data-invalid]
Whether the switch invalid.
isRequiredCSS Selector: [data-required]
Whether the switch is required.
stateCSS Selector: —
State of the switch.
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.

Related pages