Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationCase studies
Components

Switch

A control that allows the user to toggle between checked and not checked.

import React from 'react';

import * as Switch from '@radix-ui/react-switch';

import './styles.css';



const SwitchDemo = () => (

  <form>

    <div style={{ display: 'flex', alignItems: 'center' }}>

      <label className="Label" htmlFor="airplane-mode" style={{ paddingRight: 15 }}>

        Airplane mode

      </label>

      <Switch.Root className="SwitchRoot" id="airplane-mode">

        <Switch.Thumb className="SwitchThumb" />

      </Switch.Root>

    </div>

  </form>

);



export default SwitchDemo;

Features

    Full keyboard navigation.

    Can be controlled or uncontrolled.

Installation

Install the component from your command line.

npm install @radix-ui/react-switch

Anatomy

Import all parts and piece them together.

import * as Switch from '@radix-ui/react-switch';



export default () => (

  <Switch.Root>

    <Switch.Thumb />

  </Switch.Root>

);

API Reference

Root

Contains all the parts of a switch. An input will also render when used within a form to ensure events propagate correctly.

PropTypeDefault
asChildbooleanfalse
defaultCheckedbooleanNo default value
checkedbooleanNo default value
onCheckedChangefunctionNo default value
disabledbooleanNo default value
requiredbooleanNo default value
namestringNo default value
valuestringon
Data attributeValues
[data-state]"checked" | "unchecked"
[data-disabled]

Present when disabled

Thumb

The thumb that is used to visually indicate whether the switch is on or off.

PropTypeDefault
asChildbooleanfalse
Data attributeValues
[data-state]"checked" | "unchecked"
[data-disabled]

Present when disabled

Accessibility

Adheres to the switch role requirements.

Keyboard Interactions

KeyDescription
Space
Toggles the component's state.
Enter
Toggles the component's state.
PreviousSlider
NextTabs
Edit this page on GitHub.