Skip to main content
Version: v6

ion-radio

shadow

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

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

Properties

color

DescriptionThe 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.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザはラジオと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

name

Descriptionフォームデータとともに送信されるコントロールの名前。
Attributename
Typestring
Defaultthis.inputId

value

Descriptionラジオの値です。
Attributevalue
Typeany
Defaultundefined

Events

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

Methods

No public methods available for this component.

CSS Shadow Parts

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

CSS Custom Properties

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

Slots

No slots available for this component.