# Shadcn Time Range

> Toggle group for time range filter

- 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-12
- 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-12")`
- Registry item: https://reui.io/r/styles/base-nova/c-toggle-group-12.json
- Uses: Toggle Group

## Best for

Small outline presets 1H, 6H, 24H, 7D, 30D and All in one row, with 24H picked on load

## When not to use

- A custom span with a chosen start and end day, beyond fixed presets: use [Date Selector](https://reui.io/components/date-selector.md) (`get_component("date-selector")`)

## Install

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

## 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.