Checkbox (チェックボックス)

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

    Checkbox のデモ

    操作状態

    Checkbox は、有効または無効の状態で挿入できます。

    テーマ

    Checkbox は、暗いと明るいバリエーションで分かりやすく、背景に明暗のコントラストを付けてスタイル設定できます。

    レイアウト テンプレート

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

    状態

    Checkbox は、オン/オフと不確定状態があります。Sketch ではこれを Symbol Overrides で実現していますが、Adobe XD では Component States パラダイムを使用して簡単に状態を切り替えることができます。

    スタイル設定

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

    使用方法

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

    良い例 悪い例

    その他のリソース

    関連トピック:

    コミュニティに参加して新しいアイデアをご提案ください。