Neumorphism UI

Toggle Group

Use ToggleGroup for related pressed options, such as alignment or formatting controls.

Preview

Text alignment

Choose left, center, or right alignment and display the current controlled selection.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/toggle-group

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Give the group a name and each ToggleGroupItem a distinct value. Keep selected values as an array and use multiple when more than one option may remain pressed.

"use client";

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

export default function Example() {
  return (
    <ToggleGroup defaultValue={["left"]} aria-label="Text alignment">
      <ToggleGroupItem value="left">Left</ToggleGroupItem>
      <ToggleGroupItem value="center">Center</ToggleGroupItem>
      <ToggleGroupItem value="right">Right</ToggleGroupItem>
    </ToggleGroup>
  );
}

API Reference

A keyboard-navigable group of single or multiple selections. Label the group and every item. Distinguish arrow-key focus movement from selection.

ComponentPropTypeDefaultDescription
ToggleGroupvalue / defaultValuereadonly string[]—Set controlled or initial state.
ToggleGroupmultipleboolean—Allow multiple selected items.
ToggleGrouporientation"horizontal" | "vertical"—Set layout and keyboard-navigation orientation.

Accessibility

  • 01

    Label the group and every item. Distinguish arrow-key focus movement from selection.

  • 02

    Preserve labels and visible focus when customizing render or className.