Iterating Radio Button Group

Question

Trying to Iterate the object value in the Radio button group

Issue: When I select Force and Select Sales, Both button shows as selected. Expecting one should select on selection.

Note: Tried by by lightning-radio-group with type="button" It's working. trying to Implement in SLDS.

<fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Radio Group Label</legend>
    <div class="slds-form-element__control">
        <div class="slds-radio_button-group">
            <template for:each={options} for:item="op" for:index="index">
                <span class="slds-button slds-radio_button" key={op.value}>
                    <input type="radio" name={op.label} id={op.label} value={op.label} />
                    <label class="slds-radio_button__label" for={op.label}>
                        <span class="slds-radio_faux">{op.label}</span>
                    </label>
                </span>
            </template>
        </div>
    </div>
</fieldset>

import { LightningElement } from 'lwc';

export default class RadioGroupButtonDisabled extends LightningElement {
    value = '';

    get options() {
        return [
            { label: 'Sales', value: 'option1' },
            { label: 'Force', value: 'option2' },
        ];
    }
}

Answer 1

You need to use the checked attribute and the disabled attribute of the input. checked will be true if the option is selected. Add a data-value attribute to store the value.

See the HTML code.

<template>
    <fieldset class="slds-form-element">
        <legend class="slds-form-element__legend slds-form-element__label">Radio Group Label</legend>
        <div class="slds-form-element__control">
            <div class="slds-radio_button-group">
                <template for:each={options} for:item="op" for:index="index">
                    <span class="slds-button slds-radio_button" key={op.value}>
                    <input disabled={op.disabled} onchange={handleChange} checked={op.checked} type="radio" name={op.label} id={op.label} value={op.label} data-value={op.value}/>
                    <label class="slds-radio_button__label" for={op.label}>
                        <span class="slds-radio_faux">{op.label}</span>
                    </label>
                </span>
            </template>
        </div>
    </div>
    </fieldset>
</template>

JS Code

Please note I have added new attributes in the options list, checked and disabled.

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    value = '';

    @track options = [
        { label: 'Other', value: 'option1', disabled: true },
        { label: 'Sales', value: 'option2', },
        { label: 'Force', value: 'option3', checked: true },
    ]

    /* get options() {
        return [
            { label: 'Sales', value: 'option1' },
            { label: 'Force', value: 'option2', checked: true },
        ];
    } */

    handleChange(event) {
        console.log('event.detail.checked', event.target.checked);
        console.log('event.detail.checked', event.target.dataset.value);
        this.value = event.target.dataset.value;

        this.options.forEach(opt => {
            if (opt.value === this.value) {
                opt.checked = true;
            } else {
                opt.checked = false;
            }
        });
    }
}