useSwitch

Provides the behavior and accessibility implementation for a switch component. A switch is similar to a checkbox, but represents on/off values as opposed to selection.

install	`yarn add @react-aria/switch`
version	3.0.0-rc.2
usage	`import {useSwitch} from '@react-aria/switch'`

View ARIA spec

W3C

API#

useSwitch(
  props: AriaSwitchProps,
  state: ToggleState,
  ref: RefObject<HTMLInputElement>
): SwitchAria

Features#

There is no native HTML element with switch styling. <input type="checkbox"> is the closest semantically, but isn't styled or exposed to assistive technology as a switch. useSwitch helps achieve accessible switches that can be styled as needed.

Built with a native HTML <input> element, which can be optionally visually hidden to allow custom styling
Full support for browser features like form autofill
Keyboard focus management and cross browser normalization
Labeling support for screen readers
Exposed as a switch to assistive technology via ARIA

Anatomy#

A switch consists of a visual selection indicator and a label. Users may click or touch a switch to toggle the selection state, or use the Tab key to navigate to it and the Space key to toggle it.

useSwitch returns props to be spread onto its input element:

Name	Type	Description
`inputProps`	`InputHTMLAttributes<HTMLInputElement>`	Props for the input element.

Selection state is managed by the useToggleState hook in @react-stately/toggle. The state object should be passed as an option to useSwitch.

In most cases, switches should have a visual label. If the switch does not have a visible label, an aria-label or aria-labelledby prop must be passed instead to identify the element to assistive technology.

Example#

This example uses SVG to build the switch, with a visually hidden native input to represent the switch for accessibility. This is possible using the <VisuallyHidden> from @react-aria/visually-hidden. It is still in the DOM and accessible to assistive technology, but invisible. The SVG element is the visual representation, and is hidden from screen readers with aria-hidden.

For keyboard accessibility, a focus ring is important to indicate which element has keyboard focus. This is implemented with the useFocusRing hook from @react-aria/focus. When isFocusVisible is true, an extra SVG element is rendered to indicate focus. The focus ring is only visible when the user is interacting with a keyboard, not with a mouse or touch.

import {VisuallyHidden} from '@react-aria/visually-hidden';
import {useToggleState} from '@react-stately/toggle';
import {useFocusRing} from '@react-aria/focus';

function Switch(props) {
  let {children} = props;
  let state = useToggleState(props);
  let {inputProps} = useSwitch(props, state);
  let {isFocusVisible, focusProps} = useFocusRing();
  let isChecked = inputProps.checked;

  return (
    <label style={{display: 'flex', alignItems: 'center'}}>
      <VisuallyHidden>
        <input {...inputProps} {...focusProps} />
      </VisuallyHidden>
      <svg
        width={40}
        height={24}
        aria-hidden="true"
        style={{marginRight: 4}}>
        <rect
          x={4}
          y={4}
          width={32}
          height={16}
          rx={8}
          fill={isChecked ? 'orange' : 'gray'} />
        <circle
          cx={isChecked ? 28 : 12}
          cy={12}
          r={5}
          fill="white" />
        {isFocusVisible &&
          <rect
            x={1}
            y={1}
            width={38}
            height={22}
            rx={11}
            fill="none"
            stroke="orange"
            strokeWidth={2} />
        }
      </svg>
      {children}
    </label>
  );
}

<Switch>Test</Switch>

import {VisuallyHidden} from '@react-aria/visually-hidden';
import {useToggleState} from '@react-stately/toggle';
import {useFocusRing} from '@react-aria/focus';

function Switch(props) {
  let {children} = props;
  let state = useToggleState(props);
  let {inputProps} = useSwitch(props, state);
  let {isFocusVisible, focusProps} = useFocusRing();
  let isChecked = inputProps.checked;

  return (
    <label style={{display: 'flex', alignItems: 'center'}}>
      <VisuallyHidden>
        <input {...inputProps} {...focusProps} />
      </VisuallyHidden>
      <svg
        width={40}
        height={24}
        aria-hidden="true"
        style={{marginRight: 4}}>
        <rect
          x={4}
          y={4}
          width={32}
          height={16}
          rx={8}
          fill={isChecked ? 'orange' : 'gray'} />
        <circle
          cx={isChecked ? 28 : 12}
          cy={12}
          r={5}
          fill="white" />
        {isFocusVisible &&
          <rect
            x={1}
            y={1}
            width={38}
            height={22}
            rx={11}
            fill="none"
            stroke="orange"
            strokeWidth={2} />
        }
      </svg>
      {children}
    </label>
  );
}

<Switch>Test</Switch>

import {VisuallyHidden} from '@react-aria/visually-hidden';
import {useToggleState} from '@react-stately/toggle';
import {useFocusRing} from '@react-aria/focus';

function Switch(props) {
  let {children} = props;
  let state = useToggleState(
    props
  );
  let {
    inputProps
  } = useSwitch(
    props,
    state
  );
  let {
    isFocusVisible,
    focusProps
  } = useFocusRing();
  let isChecked =
    inputProps.checked;

  return (
    <label
      style={{
        display: 'flex',
        alignItems:
          'center'
      }}>
      <VisuallyHidden>
        <input
          {...inputProps}
          {...focusProps}
        />
      </VisuallyHidden>
      <svg
        width={40}
        height={24}
        aria-hidden="true"
        style={{
          marginRight: 4
        }}>
        <rect
          x={4}
          y={4}
          width={32}
          height={16}
          rx={8}
          fill={
            isChecked
              ? 'orange'
              : 'gray'
          }
        />
        <circle
          cx={
            isChecked
              ? 28
              : 12
          }
          cy={12}
          r={5}
          fill="white"
        />
        {isFocusVisible && (
          <rect
            x={1}
            y={1}
            width={38}
            height={22}
            rx={11}
            fill="none"
            stroke="orange"
            strokeWidth={
              2
            }
          />
        )}
      </svg>
      {children}
    </label>
  );
}

<Switch>Test</Switch>

Internationalization#

RTL#

In right-to-left languages, switches should be mirrored. The switch should be placed on the right side of the label. Ensure that your CSS accounts for this.

Name	Type	Description
`children`	`ReactNode`
`defaultSelected`	`boolean`
`isSelected`	`boolean`
`onChange`	`( (isSelected: boolean )) => void`
`value`	`string`
`name`	`string`
`isDisabled`	`boolean`	Whether the input is disabled.
`isReadOnly`	`boolean`	Whether the input can be selected but not changed by the user.
`autoFocus`	`boolean`	Whether the element should receive focus on render
`onFocus`	`( (e: FocusEvent )) => void`	Handler that is called when the element receives focus.
`onBlur`	`( (e: FocusEvent )) => void`	Handler that is called when the element loses focus.
`onFocusChange`	`( (isFocused: boolean )) => void`	Handler that is called when the element's focus status changes.
`onKeyDown`	`( (e: KeyboardEvent )) => void`	Handler that is called when a key is pressed.
`onKeyUp`	`( (e: KeyboardEvent )) => void`	Handler that is called when a key is released.
`aria-controls`	`string`	Identifies the element (or elements) whose contents or presence are controlled by the current element.
`tabIndex`	`number`
`id`	`string`
`aria-label`	`string`	Defines a string value that labels the current element.
`aria-labelledby`	`string`	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	Identifies the element (or elements) that provide a detailed, extended description for the object.

BaseEvent<ReactKeyboardEvent<any>>

T & {stopPropagation: (
  (
)) => void,
continuePropagation: (
  (
)) => void
}

Name	Type	Description
`isSelected`	`boolean`	Whether the toggle is selected.
`setSelected`	`( (isSelected: boolean )) => void`	Updates selection state.

Name	Type	Description
`inputProps`	`InputHTMLAttributes<HTMLInputElement>`	Props for the input element.

Provides state management for toggle components like checkboxes and switches.

useToggleState(
  (props: CheckboxBase
)): ToggleState

Name	Type	Description
`children`	`ReactNode`
`defaultSelected`	`boolean`
`isSelected`	`boolean`
`onChange`	`( (isSelected: boolean )) => void`
`value`	`string`
`name`	`string`
`isDisabled`	`boolean`	Whether the input is disabled.
`isReadOnly`	`boolean`	Whether the input can be selected but not changed by the user.
`validationState`	`ValidationState`	Whether the input should display its "valid" or "invalid" visual styling.
`isRequired`	`boolean`	Whether user input is required on the input before form submission. Often paired with the `necessityIndicator` prop to add a visual indicator to the input.
`autoFocus`	`boolean`	Whether the element should receive focus on render
`onFocus`	`( (e: FocusEvent )) => void`	Handler that is called when the element receives focus.
`onBlur`	`( (e: FocusEvent )) => void`	Handler that is called when the element loses focus.
`onFocusChange`	`( (isFocused: boolean )) => void`	Handler that is called when the element's focus status changes.
`onKeyDown`	`( (e: KeyboardEvent )) => void`	Handler that is called when a key is pressed.
`onKeyUp`	`( (e: KeyboardEvent )) => void`	Handler that is called when a key is released.

'valid' | 'invalid'

VisuallyHidden hides its children visually, while keeping content visible to screen readers.

Name	Type	Description
`children`	`ReactNode`	The content to visually hide
`elementType`	`string \| JSXElementConstructor<any>`	The element type for the container
`isFocusable`	`boolean`	Whether the content can be focused

Determines whether a focus ring should be shown to indicate keyboard focus. Focus rings are visible only when the user is interacting with a keyboard, not with a mouse, touch, or other input methods.

useFocusRing(
  (props: FocusRingProps
)): FocusRingAria

Name	Type	Description
`within`	`boolean`	Whether to show the focus ring when something inside the container element has focus (true), or only if the container itself has focus (false).
`isTextInput`	`boolean`	Whether the element is a text input.
`autoFocus`	`boolean`	Whether the element will be auto focused.

Name	Type	Description
`isFocused`	`boolean`	Whether the element is currently focused.
`isFocusVisible`	`boolean`	Whether keyboard focus should be visible.
`focusProps`	`HTMLAttributes<HTMLElement>`	Props to apply to the container element with the focus ring.