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

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

    Ignite UI for React Radio の例

    使用方法

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

    npm install igniteui-react

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

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

    <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>

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

    例

    ラベル

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

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

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

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

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

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

    チェック済み

    ラジオをオンに切り替えるには、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>

    無効

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

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

    オフ

    ラジオをオフにするには、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>

    グループの配置

    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>

    フォーム

    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>

    スタイル設定

    IgrRadio コンポーネントは、いくつかの CSS パーツ (base、control、および label) を公開して、スタイルを完全に制御できるようにします。グローバル パレットの色を変更して、ラジオ コンポーネントの色を変更することもできます。

    :root {
    --ig-primary-h: 60deg;
    --ig-primary-s: 100%;
    --ig-primary-l: 25%;
}

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

    API リファレンス

    その他のリソース