A set of two-state buttons that can be toggled on or off.
import React from 'react';import * as ToggleGroup from '@radix-ui/react-toggle-group';import { TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon } from '@radix-ui/react-icons';import './styles.css';const ToggleGroupDemo = () => (<ToggleGroup.Root className="ToggleGroup" type="single" defaultValue="center" aria-label="Text alignment" ><ToggleGroup.Item className="ToggleGroupItem" value="left" aria-label="Left aligned"><TextAlignLeftIcon /></ToggleGroup.Item><ToggleGroup.Item className="ToggleGroupItem" value="center" aria-label="Center aligned"><TextAlignCenterIcon /></ToggleGroup.Item><ToggleGroup.Item className="ToggleGroupItem" value="right" aria-label="Right aligned"><TextAlignRightIcon /></ToggleGroup.Item></ToggleGroup.Root>);export default ToggleGroupDemo;
Full keyboard navigation.
Supports horizontal/vertical orientation.
Support single and multiple pressed buttons.
Can be controlled or uncontrolled.
Install the component from your command line.
Import the component.
Contains all the parts of a toggle group.
An item in the group.
You can control the component to ensure a value.
Uses roving tabindex to manage focus movement among items.