Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationCase studiesBlog
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
asChild
boolean
false
defaultPressed
boolean
No default value
pressed
boolean
No default value
onPressedChange
function
No default value
disabled
boolean
No 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.