Styling of Lightning UI-Component radioButton does not match SLDS Style

Question

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?

Reference
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_ui_inputRadio.htm
https://www.lightningdesignsystem.com/components/forms/#radio

Component creation

for (var valueIdx = 0; valueIdx < parameter.values.length; valueIdx++) {
    var value = parameter.values[valueIdx] || {};
    componentDescriptors.push([
        '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"
        }
    ]
}

Answer 1

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:component>
    <aura:attribute name="options" type="List" default="[
    {'label': 'apples', 'value': 'option1'},
    {'label': 'oranges', 'value': 'option2'}
    ]"/>
    <aura:attribute name="value" type="String" default="option1"/>
    <lightning:radioGroup 
        aura:id="mygroup"
        name="radioButtonGroup"
        label="Radio Button Group"
        options="{! v.options }"
        value="{! v.value }"
        onchange="{! c.handleChange }"
        required="true" />
</aura:component>

Answer 2

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>
   </label>