HTML Radio Button Default Selected

You may want to set a default selection on a radio button when you have a group of options and you want to pre-select one of them when the form loads. So, In this article, we will see about how to selected default value in HTML radio button.

If you have a form that asks the user to select their gender, you might want to pre-select the “female” option if your target audience is predominantly female. This can save the user time and effort, as they won’t have to select the option themselves if it is the one they would choose anyway. So, default selection can be a very useful way to improve the usability of your forms and make them more user-friendly.

What is default selected value?

It is the initially selected option when the page is loaded or the form is reset. We can select recommended option as default option and we can also set the default selected value in html radio button.

To select default radio button option/value, you need to use the checked attribute on the input element. For example, if you have a list of radio buttons options for selecting a payment method, you may want to pre-select the credit card payment option. You can achieve this by adding the checked attribute.

Why select a default value on the radio instead of a checkbox?

It depends on the type of information that is being collected and the design of the form. The radio button is used to select single option from list of options. Whereas the checkbox is used to select multiple options from a list of option in the form. Therefore, if you set a default value using a checkbox, it may not be needed at that point because the user can select one or more of the options.

For example, if you have a form that asks the user to select their gender, we usually select any one of these options ‘male’ and ‘female’ in gender. So, in such a place we have to create options using radio button, only then users can select single option. We should not create checkbox instead of radio button because it allows to user can select multiple options.

So, the decision on whether to use or set aa default value a radio button or checkbox, it depends on the specific use case, the design of the form, and the goals of the user experience.

How to select default radio button value?

To select a default radio button, you can add the ‘checked’ attribute to the input element that represents the default option. We don’t need to set any value for ‘checked’ attribute, just put ‘checked’. Let’s see an example:

In the example code below we have created three payment method options using radio buttons. I want to select only ‘credit cards’ option by default, so I set ‘checked’ attribute for that input element

<p>Select Payment Methods</p>
<label>
  <input type="radio" name="payment_method" value="credit cards" checked>
  Credit/Debit Cards
</label>
<label>
  <input type="radio" name="payment_method" value="paypal">
  PayPal
</label>
<label>
  <input type="radio" name="payment_method" value="gpay">
  Google Pay
</label>

Output:

Note that: We can’t set multiple option as a default selector because only one radio button can be pre-selected at a time in a group. So, It is important to ensure that only one radio button in the group has the checked attribute. If you add the ‘checked’ attribute to multiple radio buttons, the last one will be the one that is selected by default like the below example code:

<p>Select Any One:</p>

<label>
  <input type="radio" name="fruit" value="apple" checked>
  Apple
</label>
<label>
  <input type="radio" name="fruit" value="orange">
  Orange
</label>
<label>
  <input type="radio" name="fruit" value="banana" checked>
  Banana
</label>
<label>
  <input type="radio" name="fruit" value="grape">
  Grapes
</label>

Output:

In the above example code we have created four fruits options using radio button. In it we have set ‘checked’ attribute for ‘apple’ and ‘banana’ options, see the output, it doesn’t select both of them by default. Because if we set the ‘checked’ attribute to multiple radio buttons, the last one we set to will be selected by default. So in the above example we have set the last ‘banana’ options, so the ‘banana’ options is selected by default.

Conclusion

So we can improve user experience in web forms by selecting option as default in radio button