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

<ion-list>
  <ion-radio-group value="strawberries">
    <ion-item>
      <ion-label>Grapes</ion-label>
      <ion-radio slot="end" value="grapes"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Strawberries</ion-label>
      <ion-radio slot="end" value="strawberries"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Pineapple</ion-label>
      <ion-radio slot="end" value="pineapple"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Cherries (Disabled)</ion-label>
      <ion-radio slot="end" value="cherries" [disabled]="true"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

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.

<ion-list>
  <ion-radio-group [allowEmptySelection]="true" value="turtles">
    <ion-item>
      <ion-label>Dogs</ion-label>
      <ion-radio slot="end" value="dogs"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Cats</ion-label>
      <ion-radio slot="end" value="cats"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Turtles</ion-label>
      <ion-radio slot="end" value="turtles"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Fish</ion-label>
      <ion-radio slot="end" value="fish"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

Theming

Colors

<ion-radio-group value="primary">
  <ion-radio color="primary" value="primary"></ion-radio>
</ion-radio-group>
<ion-radio-group value="secondary">
  <ion-radio color="secondary" value="secondary"></ion-radio>
</ion-radio-group>
<ion-radio-group value="tertiary">
  <ion-radio color="tertiary" value="tertiary"></ion-radio>
</ion-radio-group>
<ion-radio-group value="success">
  <ion-radio color="success" value="success"></ion-radio>
</ion-radio-group>
<ion-radio-group value="warning">
  <ion-radio color="warning" value="warning"></ion-radio>
</ion-radio-group>
<ion-radio-group value="danger">
  <ion-radio color="danger" value="danger"></ion-radio>
</ion-radio-group>
<ion-radio-group value="light">
  <ion-radio color="light" value="light"></ion-radio>
</ion-radio-group>
<ion-radio-group value="medium">
  <ion-radio color="medium" value="medium"></ion-radio>
</ion-radio-group>
<ion-radio-group value="dark">
  <ion-radio color="dark" value="dark"></ion-radio>
</ion-radio-group>

CSS Custom Properties

src/app/example.component.html

<ion-radio-group value="custom-checked">
  <ion-radio value="custom"></ion-radio>
  <ion-radio value="custom-checked"></ion-radio>
</ion-radio-group>

src/app/example.component.css

ion-radio {
  --border-radius: 4px;
  --inner-border-radius: 4px;

  --color: #ddd;
  --color-checked: #6815ec;
}

ion-radio.ios {
  width: 20px;
  height: 20px;

  border: 2px solid #ddd;
  border-radius: 4px;
}

.radio-checked.ios {
  border-color: #6815ec;
}

CSS Shadow Parts

src/app/example.component.html

<ion-radio-group value="custom-checked">
  <ion-radio value="custom"></ion-radio>
  <ion-radio value="custom-checked"></ion-radio>
</ion-radio-group>

src/app/example.component.css

ion-radio {
  width: 30px;
  height: 30px;
}

ion-radio::part(container) {
  border-radius: 8px;
  border: 2px solid #ddd;
}

ion-radio::part(mark) {
  background: none;
  transition: none;
  transform: none;
  border-radius: 0;
}

ion-radio.radio-checked::part(container) {
  background: #6815ec;
  border-color: transparent;
}

ion-radio.radio-checked::part(mark) {
  width: 6px;
  height: 10px;

  border-width: 0px 2px 2px 0px;
  border-style: solid;
  border-color: #fff;

  transform: rotate(45deg);
}

Properties

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

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
ionBlur	ラジオボタンのフォーカスが外れたときに発行されます。
ionFocus	ラジオボタンにフォーカスが当たったときに発行されます。

Methods

No public methods available for this component.

CSS Shadow Parts

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

CSS Custom Properties

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

Slots

No slots available for this component.