React Radio & Radio Group (ラジオとラジオ グループ)

Ignite UI for React Radio コンポーネントを使用すると、ユーザーは、並べて表示される利用可能なオプションのセットから 1 つのオプションを選択できます。

Ignite UI for React Radio の例

EXAMPLE

TSX

CSS

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

IgrRadioModule.register();
IgrRadioGroupModule.register();

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

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

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container" style={{width: "430px", height: "25px", border: "1px solid gainsboro"}}>
                    <IgrRadioGroup alignment="horizontal">
                        <IgrRadio name="fruit" value="apple"><span>Apple</span></IgrRadio>
                        <IgrRadio name="fruit" value="banana" checked={true}><span>Banana</span></IgrRadio>
                        <IgrRadio name="fruit" value="Mango"><span>Mango</span></IgrRadio>
                        <IgrRadio name="fruit" value="orange"><span>Orange</span></IgrRadio>
                    </IgrRadioGroup>
                </div>
            </div>
        );
    }
}

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

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

Edit in: Codesandbox

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

使用方法

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

npm install igniteui-react
cmd

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

import { IgrRadioModule, IgrRadio, IgrRadioGroupComponent, IgrRadioGroupModule } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrRadioModule.register();
IgrRadioGroupModule.register();
tsx

<IgrRadioGroup>
  <IgrRadio value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio value="banana"><span>Banana</span></IgrRadio>
  <IgrRadio value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>
tsx

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

例

ラベル

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

<IgrRadio><span>Label</span></IgrRadio>
tsx

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

<IgrRadio labelPosition="before"><span>Apple</span></IgrRadio>
tsx

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

<span id="radio-label">Label</span>
<IgrRadio ariaLabelledby="radio-label"></IgrRadio>
tsx

EXAMPLE

TSX

CSS

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

IgrRadioModule.register();
IgrRadioGroupModule.register();

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

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

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container" style={{width: "430px", height:"60px", border: "1px solid gainsboro"}}>
                    <IgrRadioGroup alignment="vertical">
                        <IgrRadio name="fruit" value="apple" labelPosition="before"><span>Apple</span></IgrRadio>
                        <div style={{display: "flex", alignItems: "center"}}>
                        <span id="radio-label">Label</span>
                        <IgrRadio
                            name="fruit"
                            labelPosition="before"
                            ariaLabelledby="radio-label"
                            value="orange">
                        </IgrRadio>
                        </div>
                    </IgrRadioGroup>
                </div>
            </div>
        );
    }
}

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

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

Edit in: Codesandbox

チェック済み

ラジオをオンに切り替えるには、checked 属性を使用できます。

<IgrRadioGroup>
  <IgrRadio value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio value="banana" checked="true"><span>Banana</span></IgrRadio>
  <IgrRadio value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>
tsx

EXAMPLE

TSX

CSS

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

IgrRadioModule.register();
IgrRadioGroupModule.register();

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

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

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container" style={{width: "430px", height: "25px", border: "1px solid gainsboro"}}>
                    <IgrRadioGroup alignment="horizontal">
                        <IgrRadio name="fruit" value="apple"><span>Apple</span></IgrRadio>
                        <IgrRadio name="fruit" value="banana" checked={true}><span>Banana</span></IgrRadio>
                        <IgrRadio name="fruit" value="Mango"><span>Mango</span></IgrRadio>
                        <IgrRadio name="fruit" value="orange"><span>Orange</span></IgrRadio>
                    </IgrRadioGroup>
                </div>
            </div>
        );
    }
}

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

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

Edit in: Codesandbox

無効

invalid 属性を使用して、ラジオを無効としてマークできます。

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

EXAMPLE

TSX

CSS

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

IgrRadioModule.register();

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

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

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container" style={{width: "430px", height: "25px", border: "1px solid gainsboro"}}>
                    <IgrRadio value="banana" invalid={true}><span>Invalid</span></IgrRadio>
                </div>
            </div>
        );
    }
}

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

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

Edit in: Codesandbox

オフ

ラジオをオフにするには、disabled 属性を使用できます。

<IgrRadioGroup>
  <IgrRadio value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio value="banana" disabled="true"><span>Banana</span></IgrRadio>
  <IgrRadio value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>
tsx

EXAMPLE

TSX

CSS

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

IgrRadioModule.register();
IgrRadioGroupModule.register();

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

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

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container" style={{width: "430px", height: "25px", border: "1px solid gainsboro"}}>
                    <IgrRadioGroup alignment="horizontal">
                        <IgrRadio name="fruit" value="banana" disabled={true}><span>Banana</span></IgrRadio>
                        <IgrRadio name="fruit" value="Mango"><span>Mango</span></IgrRadio>
                        <IgrRadio name="fruit" value="apple"><span>Apple</span></IgrRadio>
                        <IgrRadio name="fruit" value="orange"><span>Orange</span></IgrRadio>
                    </IgrRadioGroup>
                </div>
            </div>
        );
    }
}

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

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

Edit in: Codesandbox

グループの配置

IgrRadioGroup を使用すると、alignment 属性を使用して、含まれているラジオ ボタンの配置方向を簡単に変更できます。許可される値は、vertical (デフォルト) と horizontal です。

<IgrRadioGroup alignment="horizontal">
  <IgrRadio value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio value="banana" disabled="true"><span>Banana</span></IgrRadio>
  <IgrRadio value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>
tsx

EXAMPLE

TSX

CSS

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

IgrRadioModule.register();
IgrRadioGroupModule.register();

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

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

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container" style={{width: "430px", height: "25px", border: "1px solid gainsboro"}}>
                    <IgrRadioGroup alignment="horizontal">
                        <IgrRadio name="fruit" value="apple"><span>Apple</span></IgrRadio>
                        <IgrRadio name="fruit" value="banana" checked={true}><span>Banana</span></IgrRadio>
                        <IgrRadio name="fruit" value="Mango"><span>Mango</span></IgrRadio>
                        <IgrRadio name="fruit" value="orange"><span>Orange</span></IgrRadio>
                    </IgrRadioGroup>
                </div>
            </div>
        );
    }
}

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

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

Edit in: Codesandbox

フォーム

Form で無線を使用する場合は、name 属性と value 属性を使用できます。

<IgrRadioGroup>
  <IgrRadio name="fruit" value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio name="fruit" value="banana"><span>Banana</span></IgrRadio>
  <IgrRadio name="fruit" value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio name="fruit" value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>
tsx

スタイル設定

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

igc-radio::part(control) {
  --size: 18px;
}

igc-radio-group {
  padding: 12px;
}

igc-radio::part(checked)::after {
  background-color: var(--ig-success-500);
}

igc-radio::part(label) {
  color: var(--ig-secondary-800);
}
css

EXAMPLE

TSX

CSS

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

IgrRadioModule.register();
IgrRadioGroupModule.register();

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

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

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container" style={{width: "430px", height: "120px", border: "1px solid gainsboro"}}>
                    <IgrRadioGroup alignment="vertical">
                        <IgrRadio name="fruit" value="apple"><span>Apple</span></IgrRadio>
                        <IgrRadio name="fruit" value="banana" checked={true}><span>Banana</span></IgrRadio>
                        <IgrRadio name="fruit" value="Mango"><span>Mango</span></IgrRadio>
                        <IgrRadio name="fruit" value="orange"><span>Orange</span></IgrRadio>
                    </IgrRadioGroup>
                </div>
            </div>
        );
    }
}

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

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
:root {
    --igc-primary-h: 60deg;
    --igc-primary-s: 100%;
    --igc-primary-l: 25%;
}

igc-radio::part(control) {
    --size: 18px;
}
cssコピー

Edit in: Codesandbox

API リファレンス

• IgrRadioGroup
• IgrRadio
• スタイル設定 & テーマ

その他のリソース

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