Skip to content
Cuelark UI
FormsAnimated

Toggle Group

Segmented controls with a gliding chip, plus outline and ghost groups.

A toggle group is a set of toggles where one or several can be on: view switchers, alignment, date ranges. The segmented style is a true segmented control: one raised chip glides to the pressed item with a slight overshoot.

Preview

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/toggle-group.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/toggle-group.

Builds on: motion

Usage

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

<ToggleGroup type="single" defaultValue="week">
  <ToggleGroupItem value="day">Day</ToggleGroupItem>
  <ToggleGroupItem value="week">Week</ToggleGroupItem>
</ToggleGroup>

Motion

How it moves

In the segmented variant, one chip glides between items with a cue-snap overshoot (GSAP).

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

ToggleGroup

Extends Radix ToggleGroup.Root (type, value, defaultValue, onValueChange).

PropTypeDefaultDescription
variant"segmented" | "outline" | "ghost""segmented"Group style.
size"sm" | "md" | "lg""md"Height follows --cl-density.

ToggleGroupItem

PropTypeDefaultDescription
valuestring—Item value.

Accessibility

  • Arrow keys move between items (roving focus).
  • Single groups expose radio semantics; multiple groups use aria-pressed.

FAQ

Also searched as: segmented control react · toggle group · shadcn toggle group · button group selector · ios segmented control