Components

Toggle Group

Pressed-button group: in single mode a raised backplate glides between pressed items as a shared element on `springs.snap`; in multiple mode each item simply latches.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add toggle-group

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { ToggleGroup } from "@lumora/ui/components/toggle-group";
// or from the barrel:
import { ToggleGroup } from "@lumora/ui";

Props worth knowing

type: "single" | "multiple" — single mode glides a backplate between pressed items as a shared element, multiple latches each item independently. items take a value plus an icon and/or label; works controlled via value/onValueChange or uncontrolled via defaultValue. Arrow keys rove, sizes sm | md. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.