Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationCase studies
Components

Toggle

A two-state button that can be either on or off.

import React from 'react';

import * as Toggle from '@radix-ui/react-toggle';

import { FontItalicIcon } from '@radix-ui/react-icons';

import './styles.css';



const ToggleDemo = () => (

  <Toggle.Root className="Toggle" aria-label="Toggle italic">

    <FontItalicIcon />

  </Toggle.Root>

);



export default ToggleDemo;

Features

    Full keyboard navigation.

    Can be controlled or uncontrolled.

Installation

Install the component from your command line.

npm install @radix-ui/react-toggle

Anatomy

Import the component.

import * as Toggle from '@radix-ui/react-toggle';



export default () => <Toggle.Root />;

API Reference

Root

The toggle.

PropTypeDefault
asChildbooleanfalse
defaultPressedbooleanNo default value
pressedbooleanNo default value
onPressedChangefunctionNo default value
disabledbooleanNo default value
Data attributeValues
[data-state]"on" | "off"
[data-disabled]

Present when disabled

Accessibility

Keyboard Interactions

KeyDescription
Space
Activates/deactivates the toggle.
Enter
Activates/deactivates the toggle.
PreviousToast
NextToggle Group
Edit this page on GitHub.