Skip to content

Billing address list in checkout as radio button instead of select – Magento 2.4

By default /Checkout/view/frontend/web/template/billing-address/list.html is loaded as a html select element, but we want to change it into a radio button option.

How can we achieve that?

We tried the following for billing-address/list.html, but that does not work:

<div class="field field-select-billing">
    <label class="label"><span data-bind="i18n: 'Billing Address'"></span></label>
    <div class="control" data-bind="foreach: addressOptions">
    <input type="radio" data-bind="attr: {
                                         value: selectedAddress,
                                         id: customerAddressId
                                         }"/>
    <label class="label" data-bind="attr: {for: customerAddressId}">
        <span data-bind="text: addressOptionsText"></span>
    </label>
    </div>
</div>