Toggle
押下状態を保持する独立したトグルボタン。 アイコンのみのボタンにラベルを付け、色だけでなく凹面と境界で選択を示します。
@neumorphism-ui/toggleプレビュー
インストール
インストール: toggle
npx shadcn@latest add @neumorphism-ui/toggleCLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。
この Registry を初めて使う場合は、先に namespace の設定 を完了してください。
使い方
Import
Toggle の import コード
"use client";
import { Toggle } from "@/components/ui/toggle";Example
Toggle の使用コード
export default function Example() {
return (<div className="flex flex-wrap gap-3"><Toggle aria-label={"固定"}><span aria-hidden="true">◆</span>{"固定"}</Toggle><Toggle defaultPressed>{"固定"}</Toggle><Toggle disabled>{"無効"}</Toggle></div>);
}API リファレンス
| コンポーネント | プロパティ | 型 | デフォルト | 説明 |
|---|---|---|---|---|
Toggle | pressed / defaultPressed | boolean | — | 制御状態または初期状態を指定します。 |
Toggle | size | "sm" | "default" | "lg" | — | コントロールのサイズを選びます。 |
Toggle | disabled | boolean | — | ユーザー操作を無効にします。 |
アクセシビリティ
- 01
アイコンのみのボタンにラベルを付け、色だけでなく凹面と境界で選択を示します。
- 02
render や className を変更する際もラベルと可視フォーカスを保ちます。