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
    Commented May 23, 2016 at 7:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .