i have an issue regarding the styling of Lightning ui:inputRadio.
Other components like ui:inputText or ui:inputSelect get rendered with the right styling.

Do i need to add additional style classes to match the SLDS style or should it work out-of-the-box?


Component creation

for (var valueIdx = 0; valueIdx < parameter.values.length; valueIdx++) {
    var value = parameter.values[valueIdx] || {};
        'ui:inputRadio', {
            disabled: !value.selectable,
            label: value.translatedValue,
            text: value.value,
            value: value.selected,
            name: parameter.name,
            required: parameter.mandatory,
            change: baseComponent.getReference('c.handleValueChange')

$A.createComponents(componentDescriptors, function (_components, status) {
    if (status === 'SUCCESS') {
        baseComponent.set('v.body', _components);
    } else {

Underlying data

    "name": "fruits",
    "mandatory": true,
    "values": [
            "selectable": true,
            "selected": false,
            "value": "pear",
            "translatedValue": "Birne"
            "selectable": true,
            "selected": false,
            "value": "strawberry",
            "translatedValue": "Erdbeere"
            "selectable": true,
            "selected": false,
            "value": "lemon",
            "translatedValue": "Zitrone"
            "selectable": true,
            "selected": false,
            "value": "lime",
            "translatedValue": "Limette"

2 Answers 2


The "ui" elements are not styled after Lightning. If you want a Lightning style, you'd use "lightning" elements. In this case, it looks like you want the lightning:radioGroup to implement the desired look and feel. Note that you no longer have to create a bunch of radio elements, simply setting the "options" attribute with the desired values is sufficient.

Example From Documentation

    <aura:attribute name="options" type="List" default="[
    {'label': 'apples', 'value': 'option1'},
    {'label': 'oranges', 'value': 'option2'}
    <aura:attribute name="value" type="String" default="option1"/>
        label="Radio Button Group"
        options="{! v.options }"
        value="{! v.value }"
        onchange="{! c.handleChange }"
        required="true" />

The component should be surrounded by a label and should have additional spans as siblings as here:

   <label class="slds-radio">   
     <ui:inputRadio aura:id="radios" label="" name="items" change="{!c.itemSelected}" />
     <span class="slds-radio--faux"></span>
     <span class="slds-assistive-text">Select Row</span>
  • 1
    Thanks for the code snippet, but i don't want to create an additional component just for the right styling. If i have to use this approach, i will not use the ui-components at all, because the component creates almost the same markup.
    – Malikai
    May 23, 2016 at 7:35

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.