Display Gender field as Radio button

Do you want to display the gender dropdown field as radio button in Magento 2? Then this post will definitely help you with that!

By default in Magento 2 the gender dropdown field can be shown in customer registration page, if it is configured so. This option can be configured in Magento Admin under Stores  Configuration  → Customers  → Customer Configuration →  Name and Addresses Options. The "Show Gender" option can have 3 different values, No, Optional and Required. Let's set it to Required for our post.

Having a deeper look at the registration form template under

vendor/magento/module-customer/view/frontend/templates/form/register.phtml

we can see that Magento 2 uses widgets to display customer's attributes like Gender, Name, Tax/VAT number and Date of Birth.

The gender widget code in registration form.

The gender widget template can be found under

vendor/magento/module-customer/view/frontend/templates/widget/gender.phtml.

You can easily override this template by creating a template file called gender.phtml under your theme folder like

app/design/frontend/Your_Theme/default/Magento_Customer/templates/widget/gender.phtml

and adding the code below

In case you are wondering about the exta javascript code added on botton of the file above, the reason is for placing the error validation message of the radio buttons after all radio buttons. Maybe on our next post we will have a deeper look on a validation custom error placement message.

So now the registration form looks like below

And also in My Account → Account Information where the same widget template is used.

Our custom gender template can be found here.

Feel free to share this post and ask your questions in the comments below.

Till next time!