Version: v7 (beta)

ion-radio

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

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

基本的な使い方

Label Placement

開発者は labelPlacement プロパティを使用して、ラベルがどのように配置されるかを制御することができます。

Justification

開発者は justify プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。

note

ion-item is only used in the demos to emphasize how justify works. It is not needed in order for justify to function correctly.

ラジオの選択を解除する

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

テーマ

Colors

CSSカスタムプロパティ

CSS Shadow Parts

Legacy Radio Syntaxからの移行

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

開発者は、この移行を一度に1つのラジオで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。

最新の構文の使い方

最新の構文を使用するには、ion-labelを削除して、ion-radioの内部にラベルを直接渡します。ラベルの配置は ion-radio の labelPlacement プロパティを使用して設定することができます。ラベルとコントロールの行の詰め方は、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>

note

Ionic の過去のバージョンでは、ion-radio が正しく機能するためには ion-item が必要でした。Ionic 7.0 からは、ion-radio は ion-item の中で、そのアイテムが ion-list に配置される場合にのみ使用されます。また、ion-radioが正しく機能するためには、ion-itemはもはや必須ではありません。

レガシー構文の使用

Ionicは、アプリが最新の無線構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は ion-radio の legacy プロパティを true に設定することで、その無線機のインスタンスがレガシー構文を使用するように強制できます。

プロパティ

color

Description	アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は theming を参照してください。
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`
Default	`undefined`

disabled

Description	`true`の場合、ユーザはラジオと対話することができません。
Attribute	`disabled`
Type	`boolean`
Default	`false`

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

name

Description	フォームデータとともに送信されるコントロールの名前。
Attribute	`name`
Type	`string`
Default	`this.inputId`

value

Description	ラジオの値です。
Attribute	`value`
Type	`any`
Default	`undefined`

イベント

Name	Description
`ionBlur`	ラジオボタンのフォーカスが外れたときに発行されます。
`ionFocus`	ラジオボタンにフォーカスが当たったときに発行されます。

メソッド

No public methods available for this component.

CSS Shadow Parts

Name	Description
`container`	ラジオマークの入れ物です。
`mark`	チェックされた状態を示すために使用されるチェックマークまたはドットです。

CSSカスタムプロパティ

Name	Description
`--border-radius`	ラジオのボーダー半径
`--color`	ラジオのカラー
`--color-checked`	チェックしたラジオの色
`--inner-border-radius`	内側のチェック付きラジオのボーダー半径

Slots

No slots available for this component.

基本的な使い方​

Label Placement​

Justification​

note

ラジオの選択を解除する​

テーマ​

Colors​

CSSカスタムプロパティ​

CSS Shadow Parts​

Legacy Radio Syntaxからの移行​

最新の構文の使い方​

note

レガシー構文の使用​

プロパティ​

color​

disabled​

mode​

name​

value​

イベント​

メソッド​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

基本的な使い方

Label Placement

Justification

ラジオの選択を解除する

テーマ

Colors

CSSカスタムプロパティ

CSS Shadow Parts

Legacy Radio Syntaxからの移行

最新の構文の使い方

レガシー構文の使用

プロパティ

color

disabled

mode

name

value

イベント

メソッド

CSS Shadow Parts

CSSカスタムプロパティ

Slots