ion-radio

shadow

单选框应在广播组内部使用。按单选框将选中它，并取消选中之前选择的单选框（如果有）。还可以通过将父单选组的 value 属性设置为单选的值来以编程方式检查它们。

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

当单选框位于单选框组内时，任何时候只会检查一台单选框。如果应选择多个项目，则应使用 checkboxes。可以在组内禁用单选框以防止与它们交互。

¥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

开发者可以使用 labelPlacement 属性来控制标签相对于控件的放置方式。此属性反映了 flexbox flex-direction 属性。

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

对象值引用

¥Object Value References

默认情况下，单选组使用严格相等 (===) 来确定是否选择某个选项。这可以通过向 compareWith 属性提供属性名称或函数来覆盖。

¥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

开发者可以使用 alignment 属性来控制标签和控件在横轴上的对齐方式。此属性反映了 flexbox align-items 属性。

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

注意

可以使用 alignment 属性对齐堆叠的单选框。当标签和控件需要水平居中时，这非常有用。

¥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 属性来控制标签和控件如何打包在一行上。此属性反映了 flexbox justify-content 属性。

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

注意

ion-item 仅在演示中用于强调 justify 的工作原理。justify 不需要它即可正常运行。

¥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

默认情况下，一旦选择了某个单选框，就无法取消选择；再次按下它将保持选中状态。可以通过使用父单选按钮组上的 allowEmptySelection 属性来修改此行为，这样可以取消选择单选按钮。

¥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 自定义属性

¥CSS Custom Properties

CSS 阴影部分

¥CSS Shadow Parts

从旧版单选框语法迁移

¥Migrating from Legacy Radio Syntax

Ionic 7.0 中引入了更简单的单选框语法。这种新语法减少了设置单选框所需的样板文件，解决了可访问性问题，并改善了开发者体验。

¥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

使用现代语法涉及删除 ion-label 并将标签直接传递到 ion-radio 内部。可以使用 ion-radio 上的 labelPlacement 属性来配置标签的位置。可以使用 ion-radio 上的 justify 属性来控制标签和控件在一行上的打包方式。

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

注意

在 Ionic 的过去版本中，ion-radio 需要 ion-item 才能正常运行。从 Ionic 7.0 开始，当项目放置在 ion-list 中时，ion-radio 只能在 ion-item 中使用。此外，ion-radio 正常运行不再需要 ion-item。

¥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 使用启发式方法来检测应用是否使用现代单选框语法。在某些情况下，最好继续使用旧语法。开发者可以将 ion-radio 上的 legacy 属性设置为 true，以强制该单选框实例使用旧语法。

¥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. Setting this property will change the radio `display` to `block`.
Attribute	`alignment`
Type	`"center" ｜ "start" ｜ undefined`
Default	`undefined`

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	If `true`, the user cannot interact with the radio.
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. Setting this property will change the radio `display` to `block`.
Attribute	`justify`
Type	`"end" ｜ "space-between" ｜ "start" ｜ undefined`
Default	`undefined`

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

mode

Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

name

Description	The name of the control, which is submitted with the form data.
Attribute	`name`
Type	`string`
Default	`this.inputId`

value

Description	the value of the radio.
Attribute	`value`
Type	`any`
Default	`undefined`

事件

¥Events

Name	Description	Bubbles
`ionBlur`	Emitted when the radio button loses focus.	`true`
`ionFocus`	Emitted when the radio button has focus.	`true`

方法

¥Methods

No public methods available for this component.

CSS 阴影部分

¥CSS Shadow Parts

Name	Description
`container`	The container for the radio mark.
`label`	The label text describing the radio.
`mark`	The checkmark or dot used to indicate the checked state.

CSS 自定义属性

¥CSS Custom Properties

Name	Description
`--border-radius`	Border radius of the radio
`--color`	Color of the radio
`--color-checked`	Color of the checked radio
`--inner-border-radius`	Border radius of the inner checked radio

Name	Description
`--border-radius`	Border radius of the radio
`--color`	Color of the radio
`--color-checked`	Color of the checked radio
`--inner-border-radius`	Border radius of the inner checked radio

插槽

¥Slots

Name	Description
``	The label text to associate with the radio. Use the "labelPlacement" property to control where the label is placed relative to the radio.

基本用法​

标签放置​

对象值引用​

对齐​

齐行​

取消选择单选框​

主题化​

颜色​

CSS 自定义属性​

CSS 阴影部分​

从旧版单选框语法迁移​

使用现代语法​

使用旧语法​

属性​

alignment​

color​

disabled​

justify​

labelPlacement​

mode​

name​

value​

事件​

方法​

CSS 阴影部分​

CSS 自定义属性​

插槽​

目录

基本用法

标签放置

对象值引用

对齐

齐行

取消选择单选框

主题化

颜色

CSS 自定义属性

CSS 阴影部分

从旧版单选框语法迁移

使用现代语法

使用旧语法

属性

alignment

color

disabled

justify

labelPlacement

mode

name

value

事件

方法

CSS 阴影部分

CSS 自定义属性

插槽