Fluent UI Blazorにおけるスイッチの使用法に関するガイドライン

始めに

スイッチを使用するとオンやオフ、画面モードのライトモードやダークモードなど相互に排他的な2つのオプションから選択できます。
スイッチを操作し状態を変更すると即時にその効果は適用されます。

もし、状態の変更を適用する前にボタンを押下するなどの送信ステップを必要とするのであればチェックボックスを使用します。

スイッチの例

スイッチの状態を変更すると即時に効果が適用しライトモードからダークモードへと変化します。

            <FluentSwitch 
                Label="ダークモード" 
                @bind-Value="@IsDark" 
                CheckedMessage="DarkMode" 
                UncheckedMessage="LightMode" />

レイアウト

ほとんどの場合はラベル付きのスイッチを使用します。ラベルはスイッチの横に表示されます。
ラベルなしでスイッチを使用する場合はそのスイッチが何であるかわかりやすい状態で表示する必要があります。例えば、スイッチの効果が列ヘッダーで示されてその対象が行で示されているデータグリッドなどです。
また、スイッチのラベルは直感的に関連付けられるように十分に近くに配置します。

コンテンツ

ラベル

スイッチ設定を説明するラベルは、名詞または短い名詞句を使用します。視覚的な手がかりにくわえて名詞を使用するだけで状態を推測するのに十分であることがよくあります。

また、名詞があいまいだったりする場合は動詞を追加してわかりやすくします。動詞は常に肯定的な状態にする必要があります。スイッチのラベルに「オン」「オフ」を使用しないでください。その代わりに、設定を有効にすることの意味を説明する特定の動詞を使用します。

スイッチのラベルを質問にしないでください。スイッチラベルとしての質問は認知的負荷を増大させる懸念があります。

スイッチラベルは末尾の句読点を使用しません。

詳細情報

スイッチの状態を示す追加の表示を含める必要がある場合はまずはCheckedMessage、UncheckedMessageプロパティの使用を検討してください。
表示領域に余裕のない場合やスイッチの状態を常に表示させる必要のない場合はツールチップの使用を検討してください。