Version: v7

ion-radio

Radios should be used inside of a radio group. Pressing a radio will check it and uncheck the previously selected radio, if there is one. They can also be checked programmatically by setting the value property of the parent radio group to the value of the radio.

When radios are inside of a radio group, only one radio will be checked at any time. If more than one item should be selected, checkboxes should be used instead. Radios can be disabled within a group to prevent interaction with them.

Basic Usage

Label Placement

Developers can use the labelPlacement property to control how the label is placed relative to the control. This property mirrors the flexbox flex-direction property.

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

Developers can use the justify property to control how the label and control are packed on a line. This property mirrors the flexbox justify-content property.

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.

Deselecting Radios

By default, once a radio is selected it cannot be deselected; pressing it again will keep it selected. This behavior can be modified by using the allowEmptySelection property on the parent radio group, which enables the radios to be deselected.

Theming

Colors

CSS Custom Properties

CSS Shadow Parts

Migrating from Legacy Radio Syntax

A simpler radio syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an radio, resolves accessibility issues, and improves the developer experience.

Developers can perform this migration one radio at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.

Using the Modern Syntax

Using the modern syntax involves removing the ion-label and passing the label directly inside of ion-radio. The placement of the label can be configured using the labelPlacement property on ion-radio. The way the label and the control are packed on a line can be controlled using the justify property on ion-radio.

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

In past versions of Ionic, ion-item was required for ion-radio to function properly. Starting in Ionic 7.0, ion-radio should only be used in an ion-item when the item is placed in an ion-list. Additionally, ion-item is no longer required for ion-radio to function properly.

Using the Legacy Syntax

Ionic uses heuristics to detect if an app is using the modern radio syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the legacy property on ion-radio to true to force that instance of the radio to use the legacy syntax.

Properties

alignment

Description	How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
Attribute	`alignment`
Type	`"center" ｜ "start"`
Default	`'center'`

color

Description	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see 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	How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.
Attribute	`justify`
Type	`"end" ｜ "space-between" ｜ "start"`
Default	`'space-between'`

labelPlacement

Description	Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
Attribute	`label-placement`
Type	`"end" ｜ "fixed" ｜ "stacked" ｜ "start"`
Default	`'start'`

legacy

Description	Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
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`

Events

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

Methods

No public methods available for this component.

CSS Shadow Parts

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

CSS Custom Properties

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

Slots

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

Basic Usage​

Label Placement​

Alignment​

Justification​

Deselecting Radios​

Theming​

Colors​

CSS Custom Properties​

CSS Shadow Parts​

Migrating from Legacy Radio Syntax​

Using the Modern Syntax​

Using the Legacy Syntax​

Properties​

alignment​

color​

disabled​

justify​

labelPlacement​

legacy​

mode​

name​

value​

Events​

Methods​

CSS Shadow Parts​

CSS Custom Properties​

Slots​

Contents

Basic Usage

Label Placement

Alignment

Justification

Deselecting Radios

Theming

Colors

CSS Custom Properties

CSS Shadow Parts

Migrating from Legacy Radio Syntax

Using the Modern Syntax

Using the Legacy Syntax

Properties

alignment

color

disabled

justify

labelPlacement

legacy

mode

name

value

Events

Methods

CSS Shadow Parts

CSS Custom Properties

Slots