ガイドライン
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Container | コンテナ要素 | — | |
| 2 | Thumb | オンとオフの状態を表す要素 | — |
Options: 選択肢
Size
sm
通常よりも小さなサイズです。限られたスペースにスイッチを配置する場合かつアクションの重要性が低い場合に使用します。
md (default)
スイッチのデフォルトのサイズです。ノーマルが最も使用されるサイズです。他のサイズのスイッチはノーマルを基準に重要度に応じて使用します。
lg
大きなスイッチはアクションの重要性を高めるため、使用は極力控えてください。
States: 状態
Default
Enable
ユーザーがスイッチを操作する前のデフォルトの状態。
Hover
ユーザーがスイッチにマウスオーバーしている状態。
Focus
ユーザーがタッチ操作や、キーボードや音声による操作を用いてスイッチに注視している状態。
Disabled
システムによってスイッチが非活性化されている状態。ユーザーによる操作は不能です。
Checked
Enable
スイッチが選択されていることを表す状態。
Hover
ユーザーがスイッチにマウスオーバーしている場合かつ、スイッチが選択されている場合の状態です。
Focus
スイッチがフォーカスされている場合かつ、スイッチが選択されている場合の状態です。
Disabled
スイッチが非活性化されている場合かつ、スイッチが選択されている場合の状態です。
Behaviors: 振る舞い
チェック状態
スイッチはオンまたオフにできます。チェックされている場合は右側にタブが表示されます。チェックされていない場合は左側に表示されます。
タッチエリア
コンテナ・サムネイルともに、最低24px四方を担保できるように、タッチエリアが定義されています。
Metrics: 寸法
sm
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 16px
- padding Vertical: 2px
- padding Horizontal: 2px
- Thumb
- Width:12px
- Height:12px
md
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 24px
- padding Vertical: 2px
- padding Horizontal: 2px
- Thumb
- Width:20px
- Height:20px
lg
- Vertical Resizing: Hug
- Horizontal Resizing: Hug
- Container Height: 32px
- padding Vertical: 2px
- padding Horizontal: 2px
- Thumb
- Width:28px
- Height:28px
Usage: 使い方
スイッチはオンとオフを切り替えるために、使用してください。
オンとオフを切り替える機能に、チェックボックスを使用しないでください。
同一のオブジェクトを異なる表現方法に切り替える時、セグメントコントロールを使用してください。
スイッチはオブジェクトのオンオフ状態を選択するために使用されます。二つの表現方法を切り替える時、スイッチを使用しないでください。
多くの選択肢から、一つだけを選択する場合、ラジオを使用してください。
多くの選択肢から、一つだけを選択する場合、スイッチを使用しないでください。
Contents: 内容
簡潔なラベルでスイッチの機能と影響範囲を伝えてください。
状態や影響範囲を明確に示すことができない、曖昧なラベルを使用しないでください。
必ずスイッチの内容を示すラベルを併記してください。
内容が不明瞭な状態で、スイッチを単体で使用しないでください。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/1/31 | ドキュメントを公開 |
| 2025/5/16 | Behaviors / Contentsをアップデート |
