Display Radio Buttons Group In Horizontal View Lightning Component – lightning:radioGroup

piyush soni Lightning Component

Currently in lightning component there is no direct way to display a lightning:radiobuttongroup horizontally. However, we have style class  named slds-form-element__control and slds-radio which can perform this.

Check Also : How To Display Lightning Component In Visualforce Page-Sample

Lightning Component :

<aura:component>
    <aura:attribute name="colors" type="List" default="[
                                                       {'label': 'Red', 'value': 'Red'},
                                                       {'label': 'Blue', 'value': 'Blue'},
                                                       {'label': 'Yellow', 'value': 'Yellow'}
                                                       ]"/>    
    
    <aura:attribute name="fruits" type="List" default="[
                                                       {'label': 'Apple', 'value': 'Apple'},
                                                       {'label': 'Banana', 'value': 'Banana'},
                                                       {'label': 'Mango', 'value': 'Mango'}
                                                       ]"/>
    
    
    <aura:attribute name="ColorValue" type="String" />
    <aura:attribute name="FruitValue" type="String" />
    
    <b>Horizontal view of radio button group in Lightning Component</b>   
    
    <lightning:radioGroup name="myColors" 
                          label="Select Color [default view ]"
                          options="{! v.colors }"
                          value="{! v.ColorValue }"
                          type="radio"
                          />
    <hr/>
   <!-- radio buttons in horizontal view --> 
    <lightning:radioGroup name="myFruits" 
                          label="Select Fruits [horizontal view]"
                          options="{! v.fruits }"
                          value="{! v.FruitValue }"
                          type="radio"
                          class="customRadioCls"
                          />
    
</aura:component>
  • use a custom class with lightning:radioGroup component. [Line 35]

Component CSS

.THIS.customRadioCls .slds-form-element__control .slds-radio{
    display : inline-block !important;
}

Check Also : How to Use Custom Font In Lightning Component Using Static Resource

Related Resource:

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with this, you can share your thoughts  in comment box.

Happy Learning ?

 

About The contributor: 

Abinaya Sivagnanam

1 Post contribute

abinaya sivagnanam

 

Post By Abinaya :

1.Display Radio Buttons Group In Horizontal View Lightning Component – lightning:radioGroup

 

7 comments

  • I created radio button but I am not able to deselect once it is clicked.

    below is the code

    <aura:component >
    <aura:attribute name=”colors”
    type=”List”
    default=”[
    {‘label’:’RED’ ,’value’:’option1′},
    {‘label’:’BLUE’, ‘value’:’option2′},
    {‘label’:’Yello’,’value’:’option3′}
    ]”/>

    <aura:attribute name=”value” type=”string” default=”option1″/>

    <lightning:radioGroup aura:id=”radio”
    label=”Radio button group”
    value=”{!v.value}”
    options=”{!v.colors}”
    type=”radio”/>

    </aura:component>

    Reply

Leave a Reply