バージョン: v8

ion-radio

ラジオは、ラジオグループ内で使用する必要があります。ラジオを押すと、チェックが入り、以前に選択されていたラジオがあればチェックが外れます。また、親ラジオグループのvalueプロパティをラジオの値に設定することで、プログラムでチェックを入れることもできます。

ラジオがラジオグループ内にある場合、一度にチェックされるラジオは1つだけです。複数の項目を選択する必要がある場合は、代わりにチェックボックスを使用する必要があります。グループ内のラジオは、操作を防ぐために無効にすることができます。

基本的な使い方

ラベルの配置

開発者は、labelPlacementプロパティを使用して、コントロールに対するラベルの配置方法を制御できます。このプロパティは、flexboxのflex-directionプロパティを反映します。

オブジェクト値の参照

デフォルトでは、ラジオグループは厳密な等価性（===）を使用して、オプションが選択されているかどうかを判断します。これは、compareWithプロパティにプロパティ名または関数を提供することで上書きできます。

コンソール

上記の例からログが出力されると、コンソールメッセージがここに表示されます。

配置

開発者は、alignmentプロパティを使用して、ラベルとコントロールが交差軸上でどのように配置されるかを制御できます。このプロパティは、flexboxのalign-itemsプロパティを反映します。

注

積み重ねられたラジオは、alignmentプロパティを使用して配置できます。これは、ラベルとコントロールを水平方向に中央揃えにする必要がある場合に便利です。

正当化

開発者は、justifyプロパティを使用して、ラベルとコントロールが1行にどのようにパックされるかを制御できます。このプロパティは、flexboxのjustify-contentプロパティを反映します。

注

ion-itemは、justifyの動作を強調するためにデモでのみ使用されています。 justifyが正しく機能するためには必要ありません。

ラジオの選択解除

デフォルトでは、ラジオが選択されると、選択を解除することはできません。もう一度押すと選択されたままになります。この動作は、親ラジオグループのallowEmptySelectionプロパティを使用することで変更でき、これによりラジオの選択を解除できるようになります。

テーマ設定

色

CSSカスタムプロパティ

CSSシャドウパーツ

従来のラジオ構文からの移行

よりシンプルなラジオ構文がIonic 7.0で導入されました。この新しい構文では、ラジオを設定するために必要なボイラープレートが削減され、アクセシビリティの問題が解決され、開発者のエクスペリエンスが向上しています。

開発者は、この移行を一度に1つのラジオずつ実行できます。開発者は引き続き従来の構文を使用できますが、できるだけ早く移行することをお勧めします。

モダンな構文の使用

モダンな構文の使用には、ion-labelを削除し、ラベルをion-radio内に直接渡すことが含まれます。ラベルの配置は、ion-radioのlabelPlacementプロパティを使用して設定できます。ラベルとコントロールが1行にどのようにパックされるかは、ion-radioのjustifyプロパティを使用して制御できます。

JavaScript
Angular
React
Vue

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Radio Label</ion-label>
  <ion-radio></ion-radio>
</ion-item>

<!-- After -->
<ion-item>
  <ion-radio>Radio Label</ion-radio>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Radio Label</ion-label>
  <ion-radio></ion-radio>
</ion-item>

<!-- After -->
<ion-item>
  <ion-radio label-placement="fixed">Radio Label</ion-radio>
</ion-item>

<!-- Radio at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Radio Label</ion-label>
  <ion-radio></ion-radio>
</ion-item>

<!-- After -->
<ion-item>
  <ion-radio label-placement="end">Radio Label</ion-radio>
</ion-item>

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Radio Label</ion-label>
  <ion-radio></ion-radio>
</ion-item>

<!-- After -->
<ion-item>
  <ion-radio>Radio Label</ion-radio>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Radio Label</ion-label>
  <ion-radio></ion-radio>
</ion-item>

<!-- After -->
<ion-item>
  <ion-radio labelPlacement="fixed">Radio Label</ion-radio>
</ion-item>

<!-- Radio at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Radio Label</ion-label>
  <ion-radio></ion-radio>
</ion-item>

<!-- After -->
<ion-item>
  <ion-radio labelPlacement="end">Radio Label</ion-radio>
</ion-item>

{/* Basic */}

{/* Before */}
<IonItem>
  <IonLabel>Radio Label</IonLabel>
  <IonRadio></IonRadio>
</IonItem>

{/* After */}
<IonItem>
  <IonRadio>Radio Label</IonRadio>
</IonItem>

{/* Fixed Labels */}

{/* Before */}
<IonItem>
  <IonLabel position="fixed">Radio Label</IonLabel>
  <IonRadio></IonRadio>
</IonItem>

{/* After */}
<IonItem>
  <IonRadio labelPlacement="fixed">Radio Label</IonRadio>
</IonItem>

{/* Radio at the start of line, Label at the end of line */}

{/* Before */}
<IonItem>
  <IonLabel slot="end">Radio Label</IonLabel>
  <IonRadio></IonRadio>
</IonItem>

{/* After */}
<IonItem>
  <IonRadio labelPlacement="end">Radio Label</IonRadio>
</IonItem>

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Radio Label</ion-label>
  <ion-radio></ion-radio>
</ion-item>

<!-- After -->
<ion-item>
  <ion-radio>Radio Label</ion-radio>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Radio Label</ion-label>
  <ion-radio></ion-radio>
</ion-item>

<!-- After -->
<ion-item>
  <ion-radio label-placement="fixed">Radio Label</ion-radio>
</ion-item>

<!-- Radio at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Radio Label</ion-label>
  <ion-radio></ion-radio>
</ion-item>

<!-- After -->
<ion-item>
  <ion-radio label-placement="end">Radio Label</ion-radio>
</ion-item>

注

Ionicの過去のバージョンでは、ion-radioが正しく機能するためにはion-itemが必要でした。 Ionic 7.0以降では、ion-itemがion-listに配置されている場合にのみ、ion-radioをion-itemで使用する必要があります。さらに、ion-radioが正しく機能するためにion-itemは不要になりました。

従来の構文の使用

Ionicは、アプリがモダンなラジオ構文を使用しているかどうかを検出するためにヒューリスティックを使用します。場合によっては、従来の構文を使用し続ける方が望ましい場合があります。開発者は、ion-radioのlegacyプロパティをtrueに設定して、そのラジオのインスタンスで従来の構文を強制的に使用させることができます。

プロパティ

alignment

説明	ラジオとラベルの配置を交差軸上でどのように制御するか。 `"start"`: ラベルとコントロールは、LTRでは交差軸の左側に、RTLでは右側に表示されます。 `"center"`: ラベルとコントロールは、LTRとRTLの両方で交差軸の中央に表示されます。このプロパティを設定すると、ラジオの`display`が`block`に変更されます。
属性	`alignment`
型	`"center" ｜ "start" ｜ undefined`
デフォルト	`undefined`

color

説明	アプリケーションのカラーパレットから使用する色。デフォルトのオプションは、`"primary"`、`"secondary"`、`"tertiary"`、`"success"`、`"warning"`、`"danger"`、`"light"`、`"medium"`、および`"dark"`です。色の詳細については、テーマ設定を参照してください。
属性	`color`
型	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined`
デフォルト	`undefined`

disabled

説明	`true`の場合、ユーザーはラジオを操作できません。
属性	`disabled`
型	`boolean`
デフォルト	`false`

justify

説明	ラベルとラジオを1行にどのように配置するか。`"start"`: LTRではラベルとラジオは左側に、RTLでは右側に表示されます。`"end"`: LTRではラベルとラジオは右側に、RTLでは左側に表示されます。`"space-between"`: ラベルとラジオは、2つの要素の間にスペースを空けて行の両端に表示されます。このプロパティを設定すると、ラジオの`display`が`block`に変更されます。
属性	`justify`
型	`"end" ｜ "space-between" ｜ "start" ｜ undefined`
デフォルト	`undefined`

labelPlacement

説明	ラジオに対するラベルの配置場所。`"start"`: LTRではラベルはラジオの左側に、RTLでは右側に表示されます。`"end"`: LTRではラベルはラジオの右側に、RTLでは左側に表示されます。`"fixed"`: ラベルは`"start"`と同じ動作をしますが、固定幅を持ちます。長いテキストは省略記号（"..."）で切り捨てられます。`"stacked"`: ラベルは方向に関係なく、ラジオの上に表示されます。ラベルの配置は`alignment`プロパティで制御できます。
属性	`label-placement`
型	`"end" ｜ "fixed" ｜ "stacked" ｜ "start"`
デフォルト	`'start'`

mode

説明	使用するプラットフォームスタイルを決定するモード。
属性	`mode`
型	`"ios" ｜ "md"`
デフォルト	`undefined`

name

説明	コントロールの名前。フォームデータとともに送信されます。
属性	`name`
型	`string`
デフォルト	`this.inputId`

value

説明	ラジオの値。
属性	`value`
型	`any`
デフォルト	`undefined`

イベント

名前	説明	バブル
`ionBlur`	ラジオボタンがフォーカスを失ったときに発行されます。	`true`
`ionFocus`	ラジオボタンがフォーカスを得たときに発行されます。	`true`

メソッド

このコンポーネントで利用可能な公開メソッドはありません。

CSSシャドウパーツ

名前	説明
`container`	ラジオマークのコンテナ。
`label`	ラジオを説明するラベルテキスト。
`mark`	チェックされた状態を示すために使用されるチェックマークまたはドット。

CSSカスタムプロパティ

名前	説明
`--border-radius`	ラジオのボーダー半径
`--color`	ラジオの色
`--color-checked`	チェックされたラジオの色
`--inner-border-radius`	内部のチェックされたラジオのボーダー半径

名前	説明
`--border-radius`	ラジオのボーダー半径
`--color`	ラジオの色
`--color-checked`	チェックされたラジオの色
`--inner-border-radius`	内部のチェックされたラジオのボーダー半径

スロット

名前	説明
``	ラジオに関連付けるラベルテキスト。ラベルがラジオに対して配置される場所を制御するには、「labelPlacement」プロパティを使用します。

基本的な使い方​

ラベルの配置​

オブジェクト値の参照​

配置​

正当化​

ラジオの選択解除​

テーマ設定​

色​

CSSカスタムプロパティ​

CSSシャドウパーツ​

従来のラジオ構文からの移行​

モダンな構文の使用​

従来の構文の使用​

プロパティ​

alignment​

color​

disabled​

justify​

labelPlacement​

mode​

name​

value​

イベント​

メソッド​

CSSシャドウパーツ​

CSSカスタムプロパティ​

スロット​

目次

基本的な使い方

ラベルの配置

オブジェクト値の参照

配置

正当化

ラジオの選択解除

テーマ設定

色

CSSカスタムプロパティ

CSSシャドウパーツ

従来のラジオ構文からの移行

モダンな構文の使用

従来の構文の使用

プロパティ

alignment

color

disabled

justify

labelPlacement

mode

name

value

イベント

メソッド

CSSシャドウパーツ

CSSカスタムプロパティ

スロット