[SalesForce] lightning-radio-group not allowing multiselect

For both versions (LWC & Aura), the radio group documentation states that if the name attribute is not specified that multiple buttons can be selected. But this functionality does not work for the LWC version. I've tested this in Salesforce's Playground featuring all of the LWC's as well as in my own scratch org. In both cases, I was unable to select multiple buttons.

My component:

<template>
    <lightning-radio-group 
        class="slds-m-bottom_small"
        label={label}
        options={options}
        value={value}
        type="button"
        required={required}
        onchange={handleSelect}>
    </lightning-radio-group>
</template>

From https://developer.salesforce.com/docs/component-library/bundle/lightning-radio-group/documentation

"Set the name attribute to give the same name to each of the radio buttons in the group and ensure that only one button can be selected. If name is not specified, multiple radio buttons can be selected. The elements rendered by the component must have the same name value to form a group of radio buttons."

Best Answer

Thanks for bringing this up. It looks like this is a documentation bug and will be fixed in the near future.

In the meantime, if you need to select more than one option, lightning-checkbox-group is probably a better choice.

Related Solutions

[SalesForce] How to change lightning-radio-group selected value programmatically

The primary technique I like using for intercepting events that any base component doesn't have is to wrap it with a div or span.

The relevant parts are:

<div onclick={handleValueIntercept}>
  <!-- some base component or whatever -->  
</div>

handleValueIntercept(evt) {
  if (evt.target.value === 'option1') {
    evt.preventDefault();
  }
}

However, using this technique I dont know for sure if you can "flash" the option 2 back selection to quickly revert to option 1 in the base component, to give the user a little UI feedback because otherwise it may be confusing why option 2 appears clickable...but it's not letting you.

I feel like you should be able to if you just control it in this intercept function, but I hope this gets you started!

EDIT: Actually, I realized that the order of the event and value setting wasn't working in my favor, so what I did was something else entirely. I will leave that answer up there just to showcase how to intercept clicks (but the value was being set after the click, so it was moot).

Here's a working version, complete with the reset to normal - albeit not pretty.

What's happening here is important in these two parts:

<div if:true={showRadioGroup}>
  <!-- something you want to reset -->
</div>

handleChange(evt) {
  const selectedValue = evt.detail.value;
  if (selectedValue === 'option2') {
    // this allows the render cycle to delay just long enough to "reset" state
    this.showRadioGroup = false;
    window.clearTimeout(this.delayTimeout);
    this.delayTimeout = setTimeout(() => {
      this.showRadioGroup = true;
    }, 0);
  } else {
    this.value = selectedValue
  }
}

As far as I can tell, this component does not take into account the value state as matching which color is highlighted, so programmatically passing it in after an event change doesn't seem to fly.

[SalesForce] Lightning Web Components – Radio button “checked” not retaining when navigating back and forth

You have to bind the checked attribute of the radio group to your data (e. g. via adding a checked property to your options object) in order to keep track of the selected dom element.

Updated your example here

Related Topic