Checkbox (チェックボックス)

Checkbox コンポーネントシンボルは、設定の変更やフォームでの同意などに最もよく利用されます。Checkbox は、Ignite UI for Angular Checkbox コンポーネントと視覚的に同じものです。

Checkbox のデモ

操作状態

Checkbox は、有効または無効の状態で挿入できます。Sketch および Adobe XD では、コンポーネントを挿入する前に状態を選択する必要があります。Figma では、以下のプロパティを単独または組み合わせて適用することもできます: Hover (ホバー)、Focused (フォーカス済み)、Invalid (無効)。これらはプロパティパネルで切り替えることができます。

レイアウトテンプレート

Sketch で Checkbox は、Checkbox 要素の前後に Checkbox ラベルが配置されるラベル位置のバリアントをサポートします。Figma では、「Label Position」プロパティを使用して、ラベルの位置を変更できます。Adobe XD では、Stacks を使用して、チェックボックスのビジュアルの左または右にドラッグするだけで、デザイン時にラベルとチェックボックスの位置を変更できるようにしています。

状態

Checkbox は、オン/オフと不確定状態があります。Figma ではプロパティパネルの「State」プロパティで選択状態を切り替えることができます。Sketch ではこれを Symbol Overrides で実現していますが、Adobe XD では Component States パラダイムを使用して簡単に状態を切り替えることができます。

スタイル設定

Checkbox には、チェックと塗りつぶしの色のさまざまなオプション、およびラベルの位置と色を設定するメカニズムによるスタイルの柔軟性があります。

使用方法

多くの Checkboxes を列グループに配置する必要がある場合にリストをすばやく簡単にスキャンできます。チェックボックスは単一行に隣接して配置できますが、複数列に配置しないようにします。

良い例	悪い例