【UIパーツ大全】トグルスイッチ[toggle switch]参考パーツ一覧

2025.04.30

トグルスイッチ（toggle switch）はWebやアプリのUIに欠かせないインターフェース要素のひとつです。オン・オフの状態を直感的に切り替えるこのパーツは、ユーザー体験（UX）に大きな影響を与えるため正しい設計と適切な使い所が求められます。

本記事ではトグルスイッチの基本からデザインパターン、使用シーン、代表的なUIライブラリのトグルパーツ一覧までを網羅的に解説します。UIデザインの参考資料やUIコンポーネント開発のベースとして、ぜひご活用ください。

トグルスイッチとは？

トグルスイッチは二者択一の状態（例：オン/オフ、有効/無効）を切り替えるUIパーツです。実際の物理スイッチに似た操作性で、現在の状態がひと目でわかるのが特徴です。

よく使われる用途

設定の有効/無効
通知のオン/オフ
ダークモードの切り替え
プライバシー設定の選択

トグルスイッチはチェックボックスと似ていますが、状態が即時反映される点やビジュアルの違いによりUI的にもUX的にも異なる役割を持っています。

トグルスイッチを使用する際の注意点

1. 明確な状態表示

オン・オフの状態が一目で分かるように、色（緑/灰色など）やテキストラベルで視覚的に補助しましょう。

2. 即時反映 vs 確認操作

設定が即時適用されるならトグルスイッチ、変更後に「保存」などの操作が必要な場合はチェックボックスやラジオボタンのほうが適しています。

3. アクセシビリティ対応

キーボード操作やスクリーンリーダー対応を意識したコーディングが必要です。aria-checkedやrole="switch"の指定は基本。

トグルスイッチのデザインバリエーション

ベーシック型（iOSスタイル）

円形のハンドルが横にスライドしてオン/オフを切り替えるタイプ。iOSの設定画面でおなじみのスタイルです。

テキストラベル付き

「ON / OFF」や「有効 / 無効」など、明確なテキストを表示して誤解を防ぐスタイル。視認性とアクセシビリティの両面で効果的。

アイコン付き

スピーカー、電球、太陽と月など、切り替えの内容に応じたアイコンを使用することで意味が伝わりやすくなります。

4. マテリアルデザイン型

GoogleのMaterial Designガイドラインに従った、シンプルでアニメーション付きのトグル。AndroidアプリやGoogleサービスに多く採用されています。

トグルスイッチの使用例・シーン別

シーン	例	説明
ユーザー設定	ダークモード切替	即時反映が期待される設定
通知管理	メール通知の有無	ユーザーが手動でコントロールしたいもの
フィルター機能	「在庫ありのみ表示」	検索や一覧画面での絞り込み
アクセス制限	公開/非公開の切り替え	状態が明確に見える必要がある

UIライブラリ別：トグルスイッチパーツ一覧

各種フロントエンドライブラリにおける代表的なトグルスイッチの実装例をまとめました。

React（shadcn/ui）

import { Switch } from "@/components/ui/switch"

<Switch defaultChecked />

シンプルで拡張性の高いSwitchコンポーネント。Tailwind CSSと統合されておりカスタマイズが容易。

Material-UI (MUI)

import Switch from '@mui/material/Switch';

<Switch defaultChecked />

アクセシビリティ対応とデザインの一貫性が特徴。マテリアルガイドラインに準拠。

Chakra UI

import { Switch } from "@chakra-ui/react"

<Switch defaultChecked />

テーマ性と柔軟性が魅力。スタイルもReactコンポーネントベースで直感的。

Bootstrap 5

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Toggle</label>
</div>

HTMLベースで利用できる軽量な実装。JS不要でサクッと導入可能。

Tailwind + Headless UI

import { Switch } from '@headlessui/react'

<Switch
  checked={enabled}
  onChange={setEnabled}
  className={`${enabled ? 'bg-blue-600' : 'bg-gray-200'} relative inline-flex h-6 w-11 items-center rounded-full`}
>
  <span
    className={`${enabled ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform bg-white rounded-full transition`}
  />
</Switch>

UIの構造とスタイルを完全に分離したアプローチ。自由度が高く、デザインカスタマイズに最適。