1

I'm trying to create a radio group styled with the SLDS styling: https://www.lightningdesignsystem.com/components/forms/#flavor-radio-group-alternate. I don't think I can use the ui:inputRadio component for this, because it renders HTML that doesn't fit the SLDS styling and markup. So, therefore I've created my own component that looks like this:

<aura:component description="A single option button to be rendered within an SLDS Radio Button Group">
<aura:attribute name="name" required="true" type="String" />
<aura:attribute name="value" required="true" type="String" />
<aura:attribute name="checked" required="true" type="Boolean" />
<aura:attribute name="label" required="true" type="String" />
<aura:registerEvent name="optionSelected" type="c:optionSelected"/>

<span class="slds-button slds-radio--button">
    <input name="{!v.name}" type="radio" value="{!v.value}" checked="{!v.checked}" onclick="{!c.handleClick}"/>
    <label class="slds-radio--button__label" >
        <span class="slds-radio--faux">{!v.label}</span>
    </label>
</span>

In my controller, I have this have this simple function:

handleClick : function(cmp, event) { console.log("Why isn't this being called?!"); }

Why doesn't my onclick function ever get called? Is there another way to do this using the ui:inputRadio component? I see the ui:inputRadio component has a "body" attribute that looks like it allows you to override the markup that gets rendered by the component. Can I leverage this? If so, how?

1
  • I tried the example (the parts I can see from what you pasted - had to fake out the optionSelect event) and I see "Why isn't this being called?!" in the js console every time I click on the radio element (not the label or the enclosing span since the onclick is wired specifically to the radio "circle"). Oct 30, 2016 at 16:06

2 Answers 2

3

When using the LDS styles, always the specify id for the input tag and for attribute for its corresponding label tag which should be same and must be unique for an input tag.

Add an attribute id to be passed along with other values to the component:

<span class="slds-button slds-radio--button">
    <input id="{!v.id}" name="{!v.name}" type="radio" value="{!v.value}" checked="{!v.checked}" onclick="{!c.handleClick}"/>
    <label class="slds-radio--button__label" for="{!v.id}">
        <span class="slds-radio--faux">{!v.label}</span>
    </label>
</span>

NOTE: {!v.id} shoud be unique for the radio buttion

1

Ok, I figured this out. Doug Chasman got me pointed in the right direction. I should have provided a more complete example. I am rendering my radio button component inside of the following component that styles the entire radio button group:

<aura:component description="SLDS Radio Button Group">
<aura:attribute name="name" required="true" type="String" />
<aura:attribute name="label" default="" type="String" />
<aura:attribute name="selectedValue" required="true" default="" type="String" />
<aura:attribute name="options" required="true" type="Object[]" />
<fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">{!v.label}</legend>
    <div class="slds-form-element__control">
        <div class="slds-radio--button-group">
            <aura:iteration items="{!v.options}" var="option" indexVar="index">
                <c:sldsRadioButton name="{!v.name}" value="{!option.value}" label="{!option.label}" checked="{!v.selectedValue == option.value}" />
            </aura:iteration>
        </div>
    </div>
</fieldset>

The issue is that when I render the radio buttons in this containment structure with the appropriate SLDS classes, the following styles are applied to the input element: http://screencast.com/t/ZkAXrdJfl. This renders the input element itself unclickable, because it is given a height and width of 1px. If I put the onclick handler on the span that contains the input element, my event handler is now being called. Here is my new radio button component, with the onclick handler moved to the enclosing span:

<aura:component description="A single option button to be rendered within an SLDS Radio Button Group">
<aura:attribute name="name" required="true" type="String" />
<aura:attribute name="value" required="true" type="String" />
<aura:attribute name="checked" required="true" type="Boolean" />
<aura:attribute name="label" required="true" type="String" />
<aura:registerEvent name="optionSelected" type="c:optionSelected"/>

<span class="slds-button slds-radio--button" onclick="{!c.handleClick}">
    <input name="{!v.name}" type="radio" value="{!v.value}" checked="{!v.checked}" />
    <label class="slds-radio--button__label" >
        <span class="slds-radio--faux">{!v.label}</span>
    </label>
</span>

Adding the id to the input element was not necessary to get the event handling working, but I agree, it is a good practice.

2
  • Good to know. If you have answered you own question, please mark it as accepted.
    – Praveen
    Nov 1, 2016 at 7:30
  • Was going to... but Stackexchange said I had to wait 13 hours before I could mark the question as being self-answered ;-)
    – tlfu
    Nov 1, 2016 at 12:46

You must log in to answer this question.

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