How to display radioGroup over multiple column

Question

I have a lot of data to display in my radioGroup, so I would like to display it in multiple columns like this.

Unfortunately I'm getting some display errors.

Here is the code

<div class="postal-code-list-formatting">
    <lightning-radio-group name="radioGroup"
        label=""
        options={postalCodes}
        value={postalCodeValue}
        type="radio"
        onchange={handleRadioSelection}>
</lightning-radio-group>
</div>

.postal-code-list-formatting {
    font-variant-numeric: tabular-nums;
    column-count: 3;
}

And the result :

There is an alignment problem . The later columns have more elements and so in the case where there are less elements than the amount of columns, the alignment gets messed up.

I also tried with the html of the lightning design system.

<div  class="postal-code-list-formatting" >
                      <template for:each={postalCodes} for:item="postalCode" >
                        <fieldset key={postalCode.Id} >
                          <div class="slds-form-element__control radiobuttons-container">
                          <span class="slds-radio slds-p-horizontal_small">
                              <input name="radiogroup" id={postalCode.Id} type="radio" value={postalCode.CRS_Zip_Code__c} onchange={handleRadioSelection}/>
                              <label class="slds-radio__label" for={postalCode.Id} >
                                  <span class="slds-radio_faux"></span>
                                  <span class="slds-form-element__label">{postalCode.CRS_Zip_Code__c}</span>
                              </label>
                          </span>
                          </div>
                        </fieldset>
                      </template>
                    </div>

It works fine when there is a scrollbar but when there is none everything appears fine at first but the top labels disappear when I click on a button that is on a column on the left of them.

A workaround I found was to add a margin to the checkbox.

<span class="slds-radio_faux" style="margin:5px"></span>

But this is more of a bandaid than a real solution. Plus it makes every row further apart from one another. What would be the best solution to do this ?

Answer 1

You probably found already a solution, but just in case...

In your case, I would create 3 different lightning-radio-group with the same name and onchange. So something like this will do the trick

HTML

<div>
    <lightning-layout horizontal-align="left">
        <lightning-layout-item padding="around-small">
            <lightning-radio-group name="radioGroup" onchange={handleRadioChange} options={options1} value={value1} type="radio"></lightning-radio-group>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            <lightning-radio-group name="radioGroup" onchange={handleRadioChange} options={options2} value={value2} type="radio"></lightning-radio-group>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            <lightning-radio-group name="radioGroup" onchange={handleRadioChange} options={options3} value={value3} type="radio"></lightning-radio-group>
        </lightning-layout-item>
    </lightning-layout>
</div> 

JS

get options1() {
    return [
        { label: '2234', value: '2234' },
        { label: '4434', value: '4434' },
    ];
}
get options2() {
    return [
        { label: '2234', value: '2234' },
        { label: '4434', value: '4434' },
    ];
}
get options3() {
    return [
        { label: '2234', value: '2234' },
        { label: '4434', value: '4434' },
    ];
}

handleRadioChange(event){
    console.log(event.detail.value);
    this.value1 = undefined;
    this.value2 = undefined;
    this.value3 = undefined;

    switch(event.detail.value){
        case '2234':
            this.value1 = event.detail.value;
            break;
        case '4434':
            this.value2 = event.detail.value;
            break;
        default:
        break;
    }
}

Maybe you can also explore other solutions like build your own radio groups, or wrap this piece of code in a LWC ready to be nested, so your parent LWC's code is not that messy. But this is a quick fix that can solve your problem.

Cheers!