Toggle Group

A set of mutually exclusive toggle buttons. Like a bank of physical switches, toggle groups provide clear visual feedback with hard-edge shadows that respond to selection.

Single Selection

Only one item can be selected at a time

Multiple Selection

Multiple items can be selected simultaneously

Animated Sliding Indicator

Background slides smoothly between selections using framer-motion

Animated Pill Toggle

Perfect for pricing toggles or binary choices

Animated Underline Tabs

Tab-style navigation with animated underline indicator

Unified Border (No Internal Borders)

All options share a single border, with background color indicating selection

Unified Border with Animation

Combined unified border with smooth sliding animation

Scale Animation

Subtle scale animation on selection

With Text Labels

Sizes

Small

Default

Large

Variants