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​

DescriptionIf true, the user cannot interact with the radio.
Attributedisabled
Typeboolean
Defaultfalse

mode​

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

name​

DescriptionThe name of the control, which is submitted with the form data.
Attributename
Typestring
Defaultthis.inputId

value​

Descriptionthe value of the radio.
Attributevalue
Typeany
Defaultundefined

Events​

NameDescriptionBubbles
ionBlurEmitted when the radio button loses focus.true
ionFocusEmitted when the radio button has focus.true

Methods​

No public methods available for this component.

CSS Shadow Parts​

NameDescription
containerThe container for the radio mark.
markThe checkmark or dot used to indicate the checked state.

CSS Custom Properties​

NameDescription
--border-radiusBorder radius of the radio
--colorColor of the radio
--color-checkedColor of the checked radio
--inner-border-radiusBorder radius of the inner checked radio

Slots​

No slots available for this component.