# Shadcn Vertical Settings

> Vertical toggle group for settings

- Type: example, free and open source (MIT)
- Component: [Toggle Group](https://reui.io/components/toggle-group.md)
- Page: https://reui.io/components/toggle-group/c-toggle-group-9
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/toggle-group.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/toggle-group.md
- MCP: `get_example("c-toggle-group-9")`
- Registry item: https://reui.io/r/styles/base-nova/c-toggle-group-9.json
- Uses: Toggle Group

## Best for

A borderless column of Wi-Fi, Bluetooth, Airplane Mode and Location with icon and label, any mix on, 2 at load

## Agent notes

- The base `ToggleGroup` keeps `orientation` for layout only, so Up and Down never move focus in this column; Left and Right do

## When not to use

- Device settings such as airplane mode set as rows with a track beside each label: use [Switch](https://reui.io/components/switch.md) (`get_component("switch")`)

## Install

```bash
npx shadcn@latest add @reui/c-toggle-group-9
```

## About Shadcn Toggle Group

### When to use

- Editor formatting and alignment controls kept as one set, such as bold, italic, underline or justify
- View, column layout and theme switchers where the pressed item holds the current choice
- Short option rows for a time range, status, sort order, billing period, channels or device settings

### When not to use

- Related actions such as export, zoom or playback joined in one strip with no pressed state: use [Button Group](https://reui.io/components/button-group.md) (`get_component("button-group")`)
- A single on or off control such as bookmark or mute that stands on its own: use [Toggle](https://reui.io/components/toggle.md) (`get_component("toggle")`)
- Labelled settings in a list, each flipped on or off beside its own text: use [Switch](https://reui.io/components/switch.md) (`get_component("switch")`)

### Agent notes

- The base twin picks one item unless `multiple` is set and always takes an array `defaultValue`; the radix twin needs `type` single or multiple
- No example passes `value` to `ToggleGroup` or reads a change back, so the pick stays inside the group; control it to act on the choice
- A second click on a pressed `ToggleGroupItem` releases it in both twins, so even a single choice group can end with nothing picked

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.