メインコンテンツまでスキップ
Version: v6

ion-radio

shadow

コンテンツ

Radioは [ion-radio-group] (radio-group.md) 内で使用します。Radioを押すと、そのRadioがチェックされます。また、親である ion-radio-group の value プロパティをRadioの値に設定することで、プログラムによってチェックすることもできます。

RadioがRadioグループの中にある場合、グループ内の1つのRadioだけが常にチェックされる。Radioを押すと、そのRadioがチェックされ、前に選択されていたRadioがあれば、そのチェックが解除されます。Radioが他のRadioとグループ内にない場合、両方のRadioが同時にチェックされる機能を持ちます。

使い方

<ion-list>
<ion-radio-group value="biff">
<ion-list-header>
<ion-label>Name</ion-label>
</ion-list-header>

<ion-item>
<ion-label>Biff</ion-label>
<ion-radio slot="start" value="biff"></ion-radio>
</ion-item>

<ion-item>
<ion-label>Griff</ion-label>
<ion-radio slot="start" value="griff"></ion-radio>
</ion-item>

<ion-item>
<ion-label>Buford</ion-label>
<ion-radio slot="start" value="buford"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>

プロパティ

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 & Record<never, never> | 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

イベント

NameDescription
ionBlurEmitted when the radio button loses focus.
ionFocusEmitted when the radio button has focus.

メソッド

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カスタムプロパティ

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.

View Source