ui:inputRadio | Lightning コンポーネント開発者ガイド

ui:inputRadio コンポーネントは、value および disabled 属性によって状態が制御されるラジオボタンを表します。radio 型の HTML input タグとして表示されます。ラジオボタンをまとめてグループ化するには、name 属性を一意の名前で指定します。

次の例は、ラジオボタンの基本設定です。

1<ui:inputRadio label="Yes"/>

この例の結果、次の HTML になります。

1<div class="uiInput uiInputRadio uiInput--default uiInput--radio">
2    <label class="uiLabel-left form-element__label uiLabel">
3        <span>Yes</span>
4    </label>
5    <input type="radio">
6</div>

次の例では、選択された ui:inputRadio コンポーネントの値を取得します。

1<aura:component>
2    <aura:attribute name="stages" type="String[]" default="Any,Open,Closed,Closed Won"/>
3    <aura:iteration items="{!v.stages}" var="stage">
4     <ui:inputRadio label="{!stage}" change="{!c.onRadio}" />
5    </aura:iteration>
6   
7   <b>Selected Item:</b>
8   <p><ui:outputText class="result" aura:id="radioResult" value="" /></p>
9
10   <b>Radio Buttons - Group</b>
11   <ui:inputRadio aura:id="r0" name="others" label="Prospecting" change="{!c.onGroup}"/>
12   <ui:inputRadio aura:id="r1" name="others" label="Qualification" change="{!c.onGroup}" value="true"/>
13   <ui:inputRadio aura:id="r2" name="others" label="Needs Analysis" change="{!c.onGroup}"/>
14   <ui:inputRadio aura:id="r3" name="others" label="Closed Lost" change="{!c.onGroup}"/>
15   <b>Selected Items:</b>
16   <p><ui:outputText class="result" aura:id="radioGroupResult" value="" /></p>
17
18</aura:component>

1({
2    onRadio: function(cmp, evt) {
3        var selected = evt.source.get("v.label");
4        resultCmp = cmp.find("radioResult");
5        resultCmp.set("v.value", selected);
6    },
7
8    onGroup: function(cmp, evt) {
9        var selected = evt.source.get("v.label");
10        resultCmp = cmp.find("radioGroupResult");
11        resultCmp.set("v.value", selected);
12    }
13})

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`disabled`	Boolean	このラジオボタンを無効な状態で表示するかどうかを指定します。無効なラジオボタンはクリックできません。デフォルト値は「false」です。
`errors`	List	表示するエラーのリスト。
`label`	String	コンポーネントに表示されるテキスト。
`labelClass`	String	表示ラベルコンポーネントの CSS クラス。
`name`	String	コンポーネントの名前。
`required`	Boolean	入力が必須かどうかを指定します。デフォルト値は「false」です。
`requiredIndicatorClass`	String	必須のインジケータコンポーネントの CSS クラス。
`text`	String	入力値の属性。
`updateOn`	String	処理されたイベントに updateOn 属性が設定されている場合、コンポーネントの値のバインドを更新します。デフォルト値は「change」です。
`value`	Boolean	オプションの状況が選択されているかどうかを示します。デフォルト値は「false」です。

イベント

イベント名	イベントタイプ	説明
`dblclick`	COMPONENT	ユーザがコンポーネントをダブルクリックすると起動されるイベント。
`mouseover`	COMPONENT	ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。
`mouseout`	COMPONENT	ユーザがコンポーネントからマウスポインタを移動すると起動されるイベント。
`mouseup`	COMPONENT	ユーザがコンポーネント上でマウスボタンを放すと起動されるイベント。
`mousemove`	COMPONENT	ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。
`click`	COMPONENT	ユーザがコンポーネントをクリックすると起動されるイベント。
`mousedown`	COMPONENT	ユーザがコンポーネント上でマウスボタンをクリックすると起動されるイベント。
`select`	COMPONENT	ユーザが何らかのテキストを選択すると起動されるイベント。
`blur`	COMPONENT	ユーザがコンポーネントから離れると起動されるイベント。
`focus`	COMPONENT	ユーザがコンポーネントにフォーカスを移動すると起動されるイベント。
`keypress`	COMPONENT	ユーザがコンポーネント上でキーボードのキーを押すまたは押したままにすると起動されるイベント。
`keyup`	COMPONENT	ユーザがコンポーネント上でキーボードのキーを放すと起動されるイベント。
`keydown`	COMPONENT	ユーザがコンポーネント上でキーボードのキーを押すと起動されるイベント。
`cut`	COMPONENT	ユーザがコンテンツをクリップボードに切り取ると起動されるイベント。
`onError`	COMPONENT	コンポーネントに検証エラーがあると起動されるイベント。
`onClearErrors`	COMPONENT	いずれかの検証エラーをクリアする必要がある場合に起動されるイベント。
`change`	COMPONENT	ユーザが入力のコンテンツを変更したときに起動されるイベント。
`copy`	COMPONENT	ユーザがコンテンツをクリップボードにコピーすると起動されるイベント。
`paste`	COMPONENT	ユーザがクリップボードからコンテンツを貼り付けると起動されるイベント。