# Toggle Group

> A set of toggle buttons that work together as a single control, built on Base UI's ToggleGroup primitive. Supports single or multiple selection, horizontal and vertical orientation, default and outline variants with three sizes, and an optional ToggleGroupSeparator between items. The Toggle and Separator primitives are inlined so the component ships as a single self-contained file.

- Author: [Cnippet](https://21st.dev/@cnippet.dev)
- License: mit
- Tags: Toggle, Toggle Group, Base UI, Segmented
- npm dependencies: class-variance-authority, @base-ui-components/react
- Live preview: https://21st.dev/@cnippet.dev/components/cnippet-toggle-group

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/cnippet.dev/cnippet-toggle-group?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/toggle.md