Toggle Group Select
One highlight slides between grouped buttons and resizes to each label.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useRef, useState, type KeyboardEvent } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Toggle Group Select
*
* One highlight for the whole group. Choosing another option slides the
* selection across and resizes it to the new label, and the helper lineAbout this pattern
A grouped choice with a single highlight rather than three that light up and go out. The highlight is mounted inside whichever option is chosen and shared layout carries it across, resizing to the new label without ever touching the text — labels change colour on a CSS transition so the animation loop stays transform-only. The helper line under the group hands over to match. It behaves like a real radio group: arrow keys move the choice, Home and End jump to the ends, and only the selected option sits in the tab order.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Form
The selection glides between options and resizes to each label.
Related patterns
- Checkbox Check DrawThe box fills from its center and the tick strokes itself in over the fill.
- Multi Select ChipsPicked options become chips in the row above the list, and the chips already there slide over to take each new one in.
- Toggle Switch SlideThe knob travels across the track while the accent fill comes up under it, settling once.