Version: v7

ion-radio

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

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

基本的な使い方

Label Placement

開発者は labelPlacement プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。このプロパティはフレックスボックスの flex-direction プロパティを反映しています。

Object Value References

By default, the radio group uses strict equality (===) to determine if an option is selected. This can be overridden by providing a property name or a function to the compareWith property.

Console

Console messages will appear here when logged from the example above.

Alignment

Developers can use the alignment property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox align-items property.

note

Stacked radios can be aligned using the alignment property. This can be useful when the label and control need to be centered horizontally.

Justification

開発者は justify プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの justify-content プロパティを反映しています。

note

ion-itemは、justifyがどのように機能するかを強調するためにデモで使用されているだけです。 justify が正しく機能するために必須ではありません。

ラジオの選択を解除する

デフォルトでは、一度選択されたラジオは選択を解除することができず、もう一度押すと選択されたままになります。この動作は、親ラジオグループの 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 に設定することで、その無線機のインスタンスがレガシー構文を使用するように強制できます。

プロパティ

alignment

Description	ラジオとラベルの十字軸上の配置を制御する方法。start"`：ラベルとコントロールはLTRでは横軸の左側に、RTLでは右側に表示されます。center"`：ラベルとコントロールはLTRでもRTLでも十字軸の中央に表示されます。
Attribute	`alignment`
Type	`"center" ｜ "start"`
Default	`'center'`

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 ｜ undefined`
Default	`undefined`

disabled

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

justify

Description	ラベルとラジオを1行にまとめる方法。`"start"` とします：ラベルとラジオは、LTRでは左側に、RTLでは右側に表示されます。`"end"`：ラベルとラジオは、LTRでは右に、RTLでは左に表示されます。`"space-between"`：ラベルとラジオは、2つの要素の間にスペースがある状態で、行の反対側の端に表示されます。
Attribute	`justify`
Type	`"end" ｜ "space-between" ｜ "start"`
Default	`'space-between'`

labelPlacement

Description	ラジオに対してラベルを配置する位置。start"`：ラベルはLTRではラジオの左に、RTLでは右に表示されます。end"`：ラベルはLTRではラジオの右、RTLでは左に表示される。fixed"`：ラベルの幅が固定される以外は` "start" `と同じ動作をします。長いテキストは省略記号("...")で切り捨てられます。stacked"`：ラベルは向きに関係なくラジオの上に表示されます。ラベルの整列は `alignment` プロパティで制御できます。
Attribute	`label-placement`
Type	`"end" ｜ "fixed" ｜ "stacked" ｜ "start"`
Default	`'start'`

legacy

Description	`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性またはラベルテキストを含むデフォルトスロットのいずれかを使用している場合にのみ、モダンフォームマークアップを選択するようになっています。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようにオプトインされる予定です。
Attribute	`legacy`
Type	`boolean ｜ undefined`
Default	`undefined`

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`	ラジオマークの入れ物です。
`label`	ラジオを説明するラベルテキスト。
`mark`	チェックされた状態を示すために使用されるチェックマークまたはドットです。

CSSカスタムプロパティ

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

Slots

Name	Description
``	ラジオに関連付けるラベルテキストです。"labelPlacement"プロパティを使用して、ラジオに対するラベルの相対的な配置を制御します。

基本的な使い方​

Label Placement​

Object Value References​

Alignment​

Justification​

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

テーマ​

Colors​

CSSカスタムプロパティ​

CSS Shadow Parts​

Legacy Radio Syntaxからの移行​

最新の構文の使い方​

レガシー構文の使用​

プロパティ​

alignment​

color​

disabled​

justify​

labelPlacement​

legacy​

mode​

name​

value​

イベント​

メソッド​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

基本的な使い方

Label Placement

Object Value References

Alignment

Justification

ラジオの選択を解除する

テーマ

Colors

CSSカスタムプロパティ

CSS Shadow Parts

Legacy Radio Syntaxからの移行

最新の構文の使い方

レガシー構文の使用

プロパティ

alignment

color

disabled

justify

labelPlacement

legacy

mode

name

value

イベント

メソッド

CSS Shadow Parts

CSSカスタムプロパティ

Slots