1

I have an existing Aura component that I need to add some help text to. I have a lightning:checkboxGroup that I need to add some help text to one of the options. The code is below. What I need to do is add red text to the end of option2. With Javascript I could start at the div surrounding the checkboxgroup and then navigate through the children to find the component then add <span style="color:red;">help text</span> to the end of the label. Is there a way to do something the same using cmp.find? I tried

<aura:component >
    <aura:attribute name="options" type="List" default="[
        {'label': 'Option1','value': 'Option1'},
        {'label': 'Option2','value': 'Option2'},
        {'label': 'Option3','value': 'Option3'},
        
    ]" />
    <div aura:id="checkboxGroup" class="slds-col slds-size_1-of-1">
        <lightning:checkboxGroup
            name="checkbox"
            label=""
            options="{! v.options }"
            value="{! v.checkboxValue }"
            onchange="{! c.handleChange }"
            class="slds-checkbox-horizontally"
        />
    </div>
</aura:component>

handleChange : function (cmp, event, helper) {

    //this returns an item but I can't find the children to get down to the label I need
    var b = cmp.find("checkboxGroup");
    console.log("*****b = " + b);

    //this does not return anything
    var a = Document.getElementByClass("slds-form-element__label");
    console.log("*****a = " + a);
}
Improve this question
1
  • 1
    You can't look inside most of the lightning components provided by Salesforce - they are mostly lwc components now. Also, change var a = Document.getElementByClass("slds-form-element__label"); to var a = document.getElementByClassName("slds-form-element__label"); (case sensitivity, wrong name). If you do want to modify the internals of another component, you could use/adapt my component: github.com/rapsacnz/RadioGroup
    – Caspar Harmer
    Commented Jun 9, 2022 at 6:05

1 Answer 1

Reset to default
0

As mentioned in the developer guide

A component can only traverse the DOM and access elements created by a component in the same namespace. This behavior prevents the anti-pattern of reaching into DOM elements owned by components in another namespace.

Your component is in c namespace, while checkboxGroup element is in lightning namespace. You can't reach into this base lightning component and modify the HTML within it. Consider doing one of the following:

  1. Build your own custom component (refer slds for styling and relevant HTML elements. The component source code provided by @CasperHarmer seems like a good place to start with.
  2. Use title attribute to display tooltip (generic) text when the mouse moves over the element.
  3. Insert HTML element inside the div (below or above lightning:checkboxGroup element) to display a generic help text
Improve this answer

You must log in to answer this question.

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