Toggle

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

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 />;

Create your styled toggle component from the primitive parts.

import { styled } from 'path-to/stitches.config';
import * as Toggle from '@radix-ui/react-toggle';
const StyledToggle = styled(Toggle.Root, {
appearance: 'none',
backgroundColor: 'transparent',
border: 'none',
padding: '5px 10px',
boxShadow: 'inset 0 0 0 1px gainsboro',
overflow: 'hidden',
borderRadius: 3,
'&:focus': {
outline: 'none',
boxShadow: 'inset 0 0 0 1px dodgerblue, 0 0 0 1px dodgerblue',
},
'&[data-state=on]': {
backgroundColor: 'gainsboro',
},
});
export default () => <StyledToggle>Toggle</StyledToggle>;

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.