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

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

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

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

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

1<div class="uiInput uiInputRadio">
2    <label class="uiLabel-left 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>

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18	onRadio: function(cmp, evt) {
19		 var elem = evt.getSource().getElement();
20		 var selected = elem.textContent;
21		 resultCmp = cmp.find("radioResult");
22		 resultCmp.set("v.value", selected);		 
23	 },
24	 
25	 onGroup: function(cmp, evt) {
26		 var elem = evt.getSource().getElement();
27		 var selected = elem.textContent;
28		 resultCmp = cmp.find("radioGroupResult");
29		 resultCmp.set("v.value", selected);
30	 }
31}

属性

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

イベント

イベント名	イベントタイプ	説明
`mouseup`	COMPONENT	ユーザがマウスボタンを放したことを示します。
`mousedown`	COMPONENT	ユーザがマウスキーを押したことを示します。
`mousemove`	COMPONENT	ユーザがマウスポインタを移動したことを示します。
`dblclick`	COMPONENT	コンポーネントがダブルクリックされたことを示します。
`mouseout`	COMPONENT	ユーザがマウスポインタをコンポーネントから移動したことを示します。
`click`	COMPONENT	コンポーネントがクリックされたことを示します。
`mouseover`	COMPONENT	ユーザがマウスポインタをコンポーネントに移動したことを示します。
`keyup`	COMPONENT	ユーザがキーボードキーを放したことを示します。
`keypress`	COMPONENT	ユーザがキーボードキーを押したままにしたことを示します。
`select`	COMPONENT	ユーザが選択を行ったことを示します。
`keydown`	COMPONENT	ユーザがキーボードキーを押してから放したことを示します。
`focus`	COMPONENT	コンポーネントにフォーカスが置かれたことを示します。
`blur`	COMPONENT	コンポーネントからフォーカスが離れたことを示します。
`validationError`	COMPONENT	コンポーネントに検証エラーがあることを示します。
`paste`	COMPONENT	ユーザがコンテンツをクリップボードから貼り付けたことを示します。
`change`	COMPONENT	コンポーネントのコンテンツまたは状況が変更されたことを示します。
`clearErrors`	COMPONENT	検証エラーをすべてクリアする必要があることを示します。
`cut`	COMPONENT	ユーザがコンテンツを切り取ってクリップボードに保存したことを示します。
`copy`	COMPONENT	ユーザがコンテンツをクリップボードにコピーしたことを示します。