Neumorphism UI

Toggle Group

配置や書式など、関連する押下状態の選択肢をまとめる場合に使います。

プレビュー

文字の配置

左、中央、右から選び、制御された現在の選択を表示します。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

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

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

グループに名前を付け、各 ToggleGroupItem に固有の value を設定します。選択値は配列で管理し、同時選択を許す場合は multiple を使います。

"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 リファレンス

単一、複数選択をまとめるキーボード操作可能なグループ。 グループと各項目にラベルを付け、矢印キーのフォーカス移動と選択を区別します。

コンポーネントプロパティ型デフォルト説明
ToggleGroupvalue / defaultValuereadonly string[]—制御状態または初期状態を指定します。
ToggleGroupmultipleboolean—複数項目の選択を許可します。
ToggleGrouporientation"horizontal" | "vertical"—配置とキーボード移動の方向を設定します。

アクセシビリティ

  • 01

    グループと各項目にラベルを付け、矢印キーのフォーカス移動と選択を区別します。

  • 02

    render や className を変更する際もラベルと可視フォーカスを保ちます。