How to Change Dropdown to Radio Buttons in Magento 2

Magento 2 CMS offers a dropdown menu to allow the frontend users to select a choice from multiple options. It can be the name of city, country, or an option for a configurable product.

Though dropdowns are convenient for selection, a store owner may want to change dropdown to radio buttons in Magento 2 to make it look neat and clean.

Dropdowns may not be suitable for your theme or layout. Radio buttons may enhance the design of the page.

All these are the reasons, a merchant may want to change the attribute dropdown to radio buttons in Magento 2.

Though Magento 2 does not offer radio buttons by default, here’s the programmatic solution using which you can implement it in your store:

Method to Change Dropdown to Radio Buttons in Magento 2:

//Using id or class get Exising Select Options   

$('form#product select').each(function(i, select){
    var $select = $(select);
    $select.find('option').each(function(j, option){
        var $option = $(option);
        var $radio = $('<input type="radio" />');                                // Create a radio:
        $radio.attr('name', $select.attr('name')).attr('value', $option.val());  // Set name and value to radio 
        if ($option.attr('selected')) $radio.attr('checked', 'checked');         // Set checked if the select's option was selected
        $select.before($radio);
        $select.before(
          $("<label />").attr('for', $select.attr('name')).text($option.text())
        );
        $select.before("<br/>");
    });
    $select.remove();
});

// In Magento 2 if you want to change configurable product's dropdown options into radio buttons then you can also use this code. In that case, you have to take the class "super-attribute-select" instead of "form#product select".

That’s it.

Also, do make sure to share the post with Magento Community via social media.

Thank you.