React Checkbox (チェックボックス) の概要

React Checkbox は、React アプリにチェックボックスを追加できるコンポーネントです。これは標準の HTML チェックボックスとして動作し、ユーザーが基本的なチェック状態とチェックなし状態、または追加の不確定状態を選択できるようにします。また、React Checkbox コンポーネントのスタイルと、フォームで使用する機能を完全に制御できます。

Checkbox の例

使用方法

IgrCheckbox は、選択された状態と選択されていない状態のどちらかを選択できることです。デフォルトのスタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

次に、以下のように、IgrCheckbox と必要な CSS をインポートする必要があります:

import { IgrCheckbox } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCheckbox の使用を開始する最も簡単な方法は次のとおりです:

<IgrCheckbox></IgrCheckbox>

例

ラベル

チェックボックスに意味のあるラベルを付けるには、開始タグと終了タグの間にテキストを配置するだけです。

<IgrCheckbox><span>Label</span></IgrCheckbox>

チェックボックスの label-position 属性を設定することにより、チェックボックスの切り替えの前または後にラベルを配置するかどうかを指定できます。許可される値は、before と after (デフォルト) です。

<IgrCheckbox labelPosition="before"></IgrCheckbox>

チェックボックスは、チェックボックスの外部の要素でラベル付けすることもできます。この場合、ユーザーはニーズに応じてラベルの位置とスタイルを完全に制御できます。

<span id="checkbox-label">Label</span>
<IgrCheckbox aria-labelledby="checkbox-label" labelPosition="before"></IgrCheckbox>

チェック済み

コンポーネントの Checked 属性を使用して、チェックボックスをデフォルトでオンにするかオフにするかを決定できます。

<IgrCheckbox checked={true}></IgrCheckbox>

不確定

コンポーネントの Indeterminate プロパティを使用して、チェックボックスの値を true にも false にも設定しません。

<IgrCheckbox indeterminate={true}></IgrCheckbox>

必須

Required プロパティを使用して、チェックボックスを必須としてマークできます。

<IgrCheckbox required={true}></IgrCheckbox>

無効

Invalid 属性を使用して、チェックボックスを無効としてマークすることができます。

<IgrCheckbox invalid={true}></IgrCheckbox>

オフ

チェックボックスをオフにするには、Disabled 属性を使用します。

<IgrCheckbox disabled={true}></IgrCheckbox>

フォーム

Form でチェックボックスを使用する場合は、Name と Value の属性を使用できます。

<IgrCheckbox name="wifi" value="enabled"></IgrCheckbox>

スタイル設定

IgrCheckbox コンポーネントは、スタイル設定に使用できる 4 つの CSS パーツを公開します。

この 4 つの CSS パーツを使用すると、Checkbox のスタイルを完全に制御できます。

igc-checkbox::part(indicator) {
  --tick-color: var(--ig-secondary-500-contrast); /* check icon color */
}

igc-checkbox::part(control checked)::after {
  --fill-color: var(--ig-secondary-500); /* checkbox background color */
}

API リファレンス

その他のリソース

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)