概要 #
トグルボタンは、ON/OFFを切り替える形式の選択肢を設ける際に使用するパーツです。
2択のうちどちらかを選ぶ操作性に優れており、チェックボックスやラジオボタンと同様に使うことができますが、より視覚的に「切り替える」感覚を伝えられるのが特長です。
スイッチの形状やカラーはデザインから選択可能で、ページの雰囲気にあわせて調整できます。
状態がひと目で把握できるため、設定項目やオンオフの制御が直感的に伝わる構成に最適です。
トグルボタンの設定項目 #
トグルボタンでは、ボタンのデザインと色をカスタマイズできます。
ユーザーが選択しやすいスタイルに調整することで、UIの視認性と操作性が向上します。
- ① デザイン：
「デザインを選択する」ボタンをクリックすると、トグルボタンのスタイル選択画面が表示されます。
スライド式の切り替えスイッチや、丸みのあるボタンなど、好みに応じたデザインを選択可能です。 - ② カラー選択：
ボタンのアクティブ時に使用される色を設定できます。
カラーパレットまたはカラーコードで指定し、「フォームカラーを使用」をONにすると、
フォーム全体の共通カラーが適用されます。
トグルボタンのデザイン選択画面 #
トグルボタンのデザインは複数のバリエーションから選択できます。
サイズやカラーリング、スイッチ形状などが異なるスタイルが用意されており、使用目的やページ全体の雰囲気に合わせて最適なデザインを適用できます。
- 01〜04： ベーシックな切り替えスイッチ（小・標準・大）
- 05〜09： シンプルスタイル。ミニマルな見た目に最適です。
- 10〜12： ポップスタイル。カラーがはっきりしていて、目立たせたい時に使われます。
デザイン選択後は右側のプレビューエリアに反映され、実際の表示イメージを確認できます。