npm install @radix-ui/react-toggle-group

import { ToggleGroup } from "radix-ui";

export default () => (
	<ToggleGroup.Root>
		<ToggleGroup.Item />
	</ToggleGroup.Root>
);

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "type",
		required: true,
		type: '"single" | "multiple"',
		typeSimple: "enum",
		description: (
			<span>
				Determines whether a single or multiple items can be pressed at a
				time.
			</span>
		),
	},
	{
		name: "value",
		required: false,
		type: "string",
		description: (
			<span>
				The controlled value of the pressed item when <Code>type</Code> is{" "}
				<Code>"single"</Code>. Must be used in conjunction with{" "}
				<Code>onValueChange</Code>.
			</span>
		),
	},
	{
		name: "defaultValue",
		required: false,
		type: "string",
		description: (
			<span>
				The value of the item to show as pressed when initially rendered and{" "}
				<Code>type</Code> is <Code>"single"</Code>. Use when you do not need
				to control the state of the items.
			</span>
		),
	},
	{
		name: "onValueChange",
		required: false,
		type: "(value: string) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the pressed state of an item changes and{" "}
				<Code>type</Code> is <Code>"single"</Code>.
			</span>
		),
	},
	{
		name: "value",
		required: false,
		default: "[]",
		type: "string[]",
		description: (
			<span>
				The controlled value of the pressed items when <Code>type</Code> is{" "}
				<Code>"multiple"</Code>. Must be used in conjunction with{" "}
				<Code>onValueChange</Code>.
			</span>
		),
	},
	{
		name: "defaultValue",
		required: false,
		default: "[]",
		type: "string[]",
		description: (
			<span>
				The values of the items to show as pressed when initially rendered and{" "}
				<Code>type</Code> is <Code>"multiple"</Code>. Use when you do not need
				to control the state of the items.
			</span>
		),
	},
	{
		name: "onValueChange",
		required: false,
		type: "(value: string[]) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the pressed state of an item changes and{" "}
				<Code>type</Code> is <Code>"multiple"</Code>.
			</span>
		),
	},
	{
		name: "disabled",
		required: false,
		type: "boolean",
		default: "false",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				toggle group and all its items.
			</span>
		),
	},
	{
		name: "rovingFocus",
		required: false,
		type: "boolean",
		default: "true",
		description: (
			<span>
				When <Code>false</Code>, navigating through the items using arrow keys
				will be disabled.
			</span>
		),
	},
	{
		name: "orientation",
		required: false,
		type: '"horizontal" | "vertical" | undefined',
		typeSimple: "enum",
		default: "undefined",
		description: (
			<span>
				The orientation of the component, which determines how focus moves:{" "}
				<Code>horizontal</Code> for left/right arrows and{" "}
				<Code>vertical</Code> for up/down arrows.
			</span>
		),
	},
	{
		name: "dir",
		required: false,
		type: '"ltr" | "rtl"',
		typeSimple: "enum",
		description: (
			<span>
				The reading direction of the toggle group. If omitted, inherits
				globally from <Code>DirectionProvider</Code> or assumes LTR
				(left-to-right) reading mode.
			</span>
		),
	},
	{
		name: "loop",
		required: false,
		type: "boolean",
		default: "true",
		description: (
			<span>
				When <Code>true</Code> and <Code>rovingFocus</Code> is{" "}
				<Code>true</Code>, keyboard navigation will loop from last item to
				first, and vice versa.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "value",
		required: true,
		type: "string",
		description: "A unique value for the item.",
	},
	{
		name: "disabled",
		type: "boolean",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				item.
			</span>
		),
	},
]}

import * as React from "react";
import { ToggleGroup } from "radix-ui";

export default () => {
	const [value, setValue] = React.useState("left");

	return (
		<ToggleGroup.Root
			type="single"
			value={value}
			onValueChange={(value) => {
				if (value) setValue(value);
			}}
		>
			<ToggleGroup.Item value="left">
				<TextAlignLeftIcon />
			</ToggleGroup.Item>
			<ToggleGroup.Item value="center">
				<TextAlignCenterIcon />
			</ToggleGroup.Item>
			<ToggleGroup.Item value="right">
				<TextAlignRightIcon />
			</ToggleGroup.Item>
		</ToggleGroup.Root>
	);
};