Magento-2 : Display gender field as radio instead of dropdown

Question

Magento-2 customer address Gender Prefix - Mr.;Mrs. field display by default as drop-down ,but I want to display it as radio button in customer address form like checkout shipping, billing address, customer registration.

Anyone have done this ?

Answer 1

Create a gender.phtml file under

app/design/frontend/Your_Theme/default/Magento_Customer/templates/widget/

and add the following code:

<div class="field gender<?php if ($block->isRequired()) echo ' required' ?>">
    <label class="label" for="<?php /* @escapeNotVerified */ echo $block->getFieldId('gender')?>"><span><?php /* @escapeNotVerified */ echo __('Gender') ?></span></label>
    <div class="control">
        <?php $options = $block->getGenderOptions(); ?>
        <?php $value = $block->getGender(); ?>
        <?php foreach ($options as $option): ?>
            <?php if(!$option->getValue()) continue; ?>
            <div class="field choice">
                <input type="radio"
                       class="radio"
                       id="gender-option-<?php /* @escapeNotVerified */ echo $option->getValue() ?>"
                    <?php if ($block->isRequired()) echo 'data-validate="{\'validate-one-required-by-name\':true}"'?>
                       name="<?php /* @escapeNotVerified */ echo $block->getFieldName('gender')?>"
                       data-selector="<?php /* @escapeNotVerified */ echo $block->getFieldName('gender')?>"
                    <?php if ($option->getValue() == $value) echo ' checked="checked"' ?>
                       value="<?php /* @escapeNotVerified */ echo $option->getValue() ?>"/>
                    <label class="label"
                       for="gender-option-<?php /* @escapeNotVerified */ echo $option->getValue() ?>">
                    <span><?php /* @escapeNotVerified */ echo $option->getLabel() ?></span>
                </label>
            </div>
        <?php endforeach;?>
    </div>
</div>

This will display the gender field in Customer Registration and in customer's account Edit Account Information as radio. Hope that helps!