I would like to do something simple but I think it is not as simple as I though. I have a form with a radio button field (salutation field in the account) and I would like to auto fill the value when the page loads itself.

I am not sur if I have to use input:radio or lightning:input.

I need that the button is horizontal, not vertical.

Can you help me please to fill le field with the javascript controller and get the value?

This is my current code:


<aura:attribute name="salutationResult" type="String" default="" />
<aura:attribute name="salutations" type="String[]" default="Mademoiselle, Madame, Monsieur" />

<aura:iteration items="{!v.salutations}" var="aSalutation">
   <ui:inputRadio name="salutation" change="{!c.onRadio}" /> {!aSalutation} &nbsp;&nbsp;


    doInit: function(component) {
        var action = component.get("c.getAccountInformations");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var storeResponse = response.getReturnValue();
                component.set("v.account", storeResponse[0]);
                var civilite = storeResponse[0].Salutation;
                if(civilite != undefined){
                    ? ... ?


onRadio: function(cmp, evt) {
         var selected = evt.getSource().get("v.label");
         cmp.find("salutationResult").set("v.value", selected);

Regards Aurélien

  • I use lightning:radioGroup but it is not horizontal. – Aurélien Laval Jan 4 '19 at 14:13

This issue looks like it is purely a styling and missuse of components issue.

If you combine lighning:input components and embed them within lighning:layout items, you can easily achieve a horizontal display of radio button options:

<aura:attribute name="salutationResult" type="String" default="" />
  <aura:attribute name="salutations" type="String[]" default="Mademoiselle, Madame, Monsieur" />

  <lightning:layout multipleRows="false">
    <aura:iteration items="{!v.salutations}" var="aSalutation">
        <lightning:layoutItem padding="around-small">
            <lightning:input onchange="{!c.change}" type="radio" label="{!aSalutation}" name="options" value="{!aSalutation}"/>

enter image description here

Notice that the multipleRows attribute is set to false - however, in my test scenario it is not required.

you can equaly set a size to the space each layoutItem will take. you might want to take a look at Layout Item

As per getting the field values on change, this is rather trivial, the lighinng:input component has an onchange event which you can use

For Ex:

change : function(component, event, helper) {
    const radBtnValue = event.getSource().get('v.value');
  • Thank you for your help. When the page loads itself, how can I check the correct radio button in the controller? – Aurélien Laval Jan 7 '19 at 9:09
  • not sure i understant, you controll what radio button is selected on page load, if you have a separate or 2nd question, feel free to open a new post – glls Jan 7 '19 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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