Radix homepageRadix Homepage
PrimitivesAlpha

Toggle

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

import React from 'react';
import { styled } from '@stitches/react';
import { violet, mauve, blackA } from '@radix-ui/colors';
import { FontItalicIcon } from '@radix-ui/react-icons';
import * as TogglePrimitive from '@radix-ui/react-toggle';
const StyledToggle = styled(TogglePrimitive.Root, {
all: 'unset',
backgroundColor: 'white',
color: mauve.mauve11,
height: 35,
width: 35,
borderRadius: 4,
display: 'flex',
fontSize: 15,
lineHeight: 1,
alignItems: 'center',
justifyContent: 'center',
boxShadow: `0 2px 10px ${blackA.blackA7}`,
'&:hover': { backgroundColor: violet.violet3 },
'&[data-state=on]': { backgroundColor: violet.violet6, color: violet.violet12 },
'&:focus': { boxShadow: `0 0 0 2px black` },
});
// Exports
const Toggle = StyledToggle;
// Your app...
const ToggleDemo = () => (
<Toggle aria-label="Toggle italic">
<FontItalicIcon />
</Toggle>
);
export default ToggleDemo;

Features

  • Full keyboard navigation.
  • Can be controlled or uncontrolled.

Install the component from your command line.

npm install @radix-ui/react-toggle

Import the component.

import * as Toggle from '@radix-ui/react-toggle';
export default () => <Toggle.Root />;

The toggle.

PropTypeDefault
asenumbutton
defaultPressedbooleanNo default value
pressedbooleanNo default value
onPressedChangefunctionNo default value
disabledbooleanNo default value
KeyDescription
SpaceActivates/deactivates the toggle.
EnterActivates/deactivates the toggle.