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

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

Checkbox の例

使用方法

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

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

npm install igniteui-react

次に、以下のように、IgrCheckbox とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrCheckboxModule, IgrCheckbox } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCheckboxModule.register();

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

<IgrCheckbox></IgrCheckbox>

[!WARNING] IgrCheckbox コンポーネントは標準の <form> 要素では機能しません。代わりに Form を使用してください。

例

ラベル

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

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

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

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

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

<span id="checkbox-label">Label</span>
<IgrCheckbox ariaLabelledby="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>

スタイル設定

チェックボックスコンポーネントは、いくつかの CSS パーツ (base、control、indicator、および label) を公開して、スタイルを完全に制御できるようにします。

igc-checkbox::part(indicator) {
  &::after {
    padding: 12px;
    border-radius: 14px;
  }
}

igc-checkbox::part(indicator checked) {
  border-radius: 0;

  &::after {
    background: olive;
    border-color: olive;
    stroke: beige;
  }
}