enter image description here

I have one radio button and one input-field..I am trying to achieve something like.if i click on the radio button , the input field should get active and value of that input-field should come automatically..If the radio button is not selected ..the field should be available but it should be disabled.


Try this out


<aura:component >
<aura:attribute name="options" type="List" default="[
                                                    {'label': 'Codes', 'value': '1'},
                                                    {'label': 'Mappings', 'value': '2'}
<aura:attribute name="radioValue" type="Integer" default=""/>
<aura:attribute name="textValue" type="String" default=""/>
                      label="Data to Export"
                      options="{! v.options }"
                      value="{! v.radioValue }"
                      onchange="{! c.handleChange }"
<ui:inputText aura:id="file" label="Export File Name" disabled="true" value="{!v.textValue}"/>


handleChange : function(component, event, helper) {
    var val = event.getSource().get("v.value");
    if(val) {
        var inputFile = component.find("file");
        inputFile.set("v.value","Value to be Set Dynamically");

Using radioGroup will be suitable for your case.And having separate attributes will be make it reusable wherever you need. Hope this helps.


I have tried your requirement in my developer org. Please add below mentioned code to any component and add test it.

.cmp file >

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="myText" type="string" default=""/>

<ui:inputText aura:id='textField' label="Export File name" value="" disabled='true'/>    
<ui:inputRadio label='Date To Export' change='{!c.onRadio}' />

make sure to close aura:component at the end, as i am not able to include in the above mentioned code.

.controllerjs file > enter the below mentioned code in the client side js file

onRadio: function (cmp, event, helper) {
    cmp.find("textField").set("v.value","Automated Text appeared here!"); 

so whenever you click on the radio button input text has been update and the field is editable.

enter image description here

enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.