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

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

Checkbox の例

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCheckboxModule.register();

export default class CheckboxOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrCheckbox>
                    <span key="checkboxLabel">Checkbox</span>
                </IgrCheckbox>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxOverview/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

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

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

npm install igniteui-react
cmd

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

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

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

<IgrCheckbox></IgrCheckbox>
tsx

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

例

ラベル

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

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

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

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

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

<span id="checkbox-label">Label</span>
<IgrCheckbox ariaLabelledby="checkbox-label" labelPosition="before"></IgrCheckbox>
tsx

EXAMPLE

TSX

CheckboxLabelStyles.css

index.css

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './CheckboxLabelStyles.css'
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCheckboxModule.register();

export default class CheckboxLabel extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="sample">
                <div className="wrapper">
                    <span id="checkbox-label">Label</span>
                    <IgrCheckbox aria-labelledby="checkbox-label" labelPosition="before"></IgrCheckbox>
                </div>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxLabel/>);
tsxコピー

.wrapper {
    display: flex;
    align-items: center;
}cssコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

チェック済み

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

<IgrCheckbox checked="true"></IgrCheckbox>
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCheckboxModule.register();

export default class CheckboxChecked extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrCheckbox checked={true}>
                    <span key="checkboxLabel">Label</span>
                </IgrCheckbox>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxChecked/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

不確定

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

<IgrCheckbox indeterminate="true"></IgrCheckbox>
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCheckboxModule.register();

export default class CheckboxIndeterminate extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrCheckbox indeterminate={true}>
                    <span key="checkboxLabel">Label</span>
                </IgrCheckbox>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxIndeterminate/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

必須

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

<IgrCheckbox required="true"></IgrCheckbox>
tsx

無効

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

<IgrCheckbox invalid="true"></IgrCheckbox>
tsx

オフ

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

<IgrCheckbox disabled="true"></IgrCheckbox>
tsx

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrCheckbox, IgrCheckboxModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCheckboxModule.register();

export default class CheckboxDisabled extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrCheckbox disabled={true}>
                    <span key="checkboxLabel">Label</span>
                </IgrCheckbox>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<CheckboxDisabled/>);
tsxコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

フォーム

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

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

スタイル設定

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

名前	説明
base	チェックボックスの基本ラッパー。
control	チェックボックスの入力要素。
indicator	チェックボックスのインジケーター アイコン。
label	チェックボックスのラベル。

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

igc-checkbox::part(indicator) {
  stroke: var(--ig-secondary-500-contrast);
}

igc-checkbox::part(control checked)::after {
  border-radius: 4px;
  background: var(--ig-secondary-500);
}
css

EXAMPLE

Edit in: Codesandbox

API リファレンス

• IgrCheckbox
• checked
• disabled
• Form
• スタイル設定 & テーマ

その他のリソース

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