--- title: Toggle Group description: A set of two-state buttons that can be toggled on or off. base: base component: true links: doc: https://base-ui.com/react/components/toggle-group api: https://base-ui.com/react/components/toggle-group#api-reference --- ## Installation Command Manual ```bash npx shadcn@latest add toggle-group ``` Install the following dependencies: ```bash npm install @base-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" ``` ```tsx A B C ``` ## Composition Use the following composition to build a `ToggleGroup`: ```text ToggleGroup ├── ToggleGroupItem └── ToggleGroupItem ``` ## Examples ### Outline Use `variant="outline"` for an outline style. ### Size Use the `size` prop to change the size of the toggle group. ### Spacing Use `spacing` to add spacing between toggle group items. ### Vertical Use `orientation="vertical"` for vertical toggle groups. ### Disabled ### Custom A custom toggle group example. ## RTL To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference See the [Base UI Toggle Group](https://base-ui.com/react/components/toggle-group#api-reference) documentation. ## Changelog ### 2026-05-17 Default Spacing Changed the default `spacing` from `0` to `2` so toggle groups render with space between items by default. Use `spacing={0}` for connected items.