lightning:radioGroup

lightning:radioGroup コンポーネントは、1 つのオプションを選択できるラジオボタングループを表します。

required 属性が true の場合、少なくとも 1 つのラジオボタンを選択する必要があります。ユーザがラジオグループで選択を行っていない場合、エラーメッセージが表示されます。

disabled 属性が true の場合、ラジオボタンの選択は変更できません。

このコンポーネントは、Lightning Design System のラジオボタンからスタイル設定を継承します。Lightning Design System のラジオボタングループからスタイル設定を継承するコンポーネントを作成するには、type="button" を設定します。

次の例では、2 つのオプションがあり、デフォルトで option1 が選択されているラジオグループを作成します。required 属性が true になっているため、1 つのラジオボタンを選択する必要があります。

1<aura:component>
2    <aura:attribute name="options" type="List" default="[
3    {'label': 'apples', 'value': 'option1'},
4    {'label': 'oranges', 'value': 'option2'}
5    ]"/>
6    <aura:attribute name="value" type="String" default="option1"/>
7    <lightning:radioGroup 
8        aura:id="mygroup"
9        name="radioButtonGroup"
10        label="Radio Button Group"
11        options="{! v.options }"
12        value="{! v.value }"
13        onchange="{! c.handleChange }"
14        required="true" />
15</aura:component>

cmp.find("mygroup").get("v.value") を使用して、どの値が選択されているのかを確認できます。選択が変更されたときにその値を取得するには、onchange イベントハンドラを使用して event.getParam("value") をコールします。

1({
2    handleChange: function (cmp, event) {
3        var changeValue = event.getParam("value");
4        alert(changeValue);
5    }
6});

アクセシビリティ

ラジオグループは、legend 要素を含む fieldset 要素内にネストされます。legend には label 値が含まれます。fieldset 要素では、関連するラジオボタンをグループ化して、タブナビゲーションと音声ナビゲーションを容易にし、アクセシビリティに役立てることができます。同様に、legend 要素では、キャプションを fieldset に割り当てられるようにしてアクセシビリティを改善します。

メソッド

このコンポーネントは、次のメソッドをサポートします。

checkValidity(): ラジオグループに有効性エラーがあるかどうかを示す、ValidityState の有効なプロパティ値 (Boolean) を返します。