Skip to main content

​
Overview

Toggle provides a button that can be toggled between on and off states. It’s useful for single-option selections like bold, italic, or favorite buttons.

​
Features

  • Can be controlled or uncontrolled
  • Full keyboard navigation
  • Accessible by default with proper ARIA attributes

​
Installation

npm install @radix-ui/react-toggle

​
Anatomy

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

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

​
API Reference

​
Root

The toggle component.
​
pressed
boolean
The controlled pressed state of the toggle.
​
defaultPressed
boolean
The pressed state when initially rendered (uncontrolled).
​
onPressedChange
(pressed: boolean) => void
Event handler called when the pressed state changes.
​
disabled
boolean
When true, prevents the user from interacting with the toggle.
​
asChild
boolean
default:"false"
Change the default rendered element for the one passed as a child.

​
Example

import * as Toggle from '@radix-ui/react-toggle';
import { FontBoldIcon } from '@radix-ui/react-icons';
import './styles.css';

export default () => (
  <Toggle.Root className="Toggle" aria-label="Toggle bold">
    <FontBoldIcon />
  </Toggle.Root>
);

​
Accessibility

Uses the button role with aria-pressed attribute.

​
Keyboard Interactions

  • Space - Activates/deactivates the toggle.
  • Enter - Activates/deactivates the toggle.

​
Data Attributes

Root
  • [data-state] - “on” or “off”
  • [data-disabled] - Present when disabled

Build docs developers (and LLMs) love

Get started for freeTalk to us