How to use the "required" attribute with a "radio" input field

Question

I am just wondering how to use the new HTML5 input attribute "required" in the right way on radio buttons. Does every radio button field need the attribute like below or is it sufficient if only one field gets it?

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />

Multifoil

Answer 1

TL;DR: Set the required attribute for at least one input of the radio group.

---

Setting required for all inputs is more clear, but not necessary (unless dynamically generating radio-buttons).

To group radio buttons they must all have the same name value. This allows only one to be selected at a time and applies required to the whole group.

<form>
  Select Gender:<br>

  <label>
    <input type="radio" name="gender" value="male" required>
    Male
  </label><br>

  <label>
    <input type="radio" name="gender" value="female">
    Female
  </label><br>

  <label>
    <input type="radio" name="gender" value="other">
    Other
  </label><br>

  <input type="submit">
</form>

Also take note of:

To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. Indeed, in general, authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place, as this is a state that the user cannot return to, and is therefore generally considered a poor user interface.

Source

Bosnia

@kumar_harsh "The radio button group that contains an input element a also contains all the other input elements b that fulfill all of the following conditions" (4) w3.org/TR/html5/forms.html#radio-button-group – Logogram

@NickHumphrey: regarding (1) - that's a very obvious thing, else they won't be called 'radio' buttons. (2) and (3) - I'd say that this is true in most cases anyways, only devs doing something very tricky would run into these edge cases (that being said, I did not know these points, so thanks for pointing it out), (4) is what my answer above states (in less technical details) – Tooth

@kumar_harsh : Any checkbox marked as required must be checked. Likewise, marking a checkbox required has not effect on any other checkboxes (same name or not). There is no simple markup to indicate indicate "of these x checkboxes with the same name", at least one must be checked. – Sumo

yes, having "atleast one checkbox must be checked" is not possible with just markup, as opposed to radio groups. – Tooth

@Bosnia It's ok to go with only 1 radio-button marked but, can you put it in all of them if you want to? I mean, I know it works but, would it be accepted by the W3C? – Significant

@Davdriver yes, you can specify it on all radio buttons, if you like to. In fact w3c wrote: To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. (see w3.org/TR/html5/forms.html#the-required-attribute under Code Example) – Bosnia

Sry but teh following is a bunch of boloney: Indeed, in general, authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place, as this is a state that the user cannot return to, and is therefore generally considered a poor user interface. Why? Because not having an initially checked control is a totally valid (UX) case. – Cultism

I'd also like to add that, in some cases, radio buttons that have no initialized "checked" state is a very good thing, and good UX. In my case, the user must initially classify some object based on a semi-long list of yes/no answers. Getting the answers to these questions wrong would adversely affect downstream logic. Therefore I cannot default the answers to either Yes or No because it will vary for each object the user is classifying. It's possible they would miss one that needed to be changed and enter bad data into the DB. Or the task be interrupted and unsure where they left off. – Separatrix

@JoelWigton I'm no native english speaker, but [...]Indeed, in general[...]generally considered[...] doesn't imply each and every time, doesn't it? Maybe I should delete this paragraph. – Bosnia

@Bosnia Nah, "in general" does cover that this isn't an absolute. But these standards bodies never give examples of when it actually would be a poor user interface to use their recommendation, so I wanted to provide one. They make it sound like if you use it, you haven't given thought to your UX. I want other developers to have the confidence to make an informed design choice -- not just blindly defaulting every radio button. – Separatrix

Interestingly, this does not work for type checkbox, which is annoying – Barring

This is exactly the answer I was looking for. But after seeing how it works... I see no logical reason they couldn't have built the same behavior for a group of checkboxes with the same name as well. – Beaux

Answer 2

I had to use required="required" along with the same name and type, and then validation worked fine.

<input type="radio" name="user-radio"  id="" value="User" required="required" />

<input type="radio" name="user-radio" id="" value="Admin" />

<input type="radio" name="user-radio" id="" value="Guest" /> 

Planography

Answer 3

Here is a very basic but modern implementation of required radio buttons with native HTML5 validation:

fieldset { 
  display: block;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  border: none;
}
body {font-size: 15px; font-family: serif;}
input {
  background: transparent;
  border-radius: 0px;
  border: 1px solid black;
  padding: 5px;
  box-shadow: none!important;
  font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
  opacity: 0; 
  position: absolute; 
  pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
  display: block;
  border: 1px solid black;
  border-left: 0;
  padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}

<form>
  <div>
    <label for="name">Name (optional)</label>
    <input id="name" type="text" name="name">
  </div>
  <fieldset>
  <legend>Gender</legend>
  <div class="checkboxes">
    <label for="male"><input id="male" type="radio" name="gender" value="male" class="hidden" required="required"><span>Male</span></label>
    <label for="female"><input id="female" type="radio" name="gender" value="female" class="hidden" required="required"><span>Female </span></label>
    <label for="other"><input id="other" type="radio" name="gender" value="other" class="hidden" required="required"><span>Other</span></label>
  </div>
  </fieldset>
  <input type="submit" value="Send" />
</form>

Although I am a big fan of the minimalistic approach of using native HTML5 validation, you might want to replace it with Javascript validation on the long run. Javascript validation gives you far more control over the validation process and it allows you to set real classes (instead of pseudo classes) to improve the styling of the (in)valid fields. This native HTML5 validation can be your fall-back in case of broken (or lack of) Javascript. You can find an example of that here, along with some other suggestions on how to make Better forms, inspired by Andrew Cole.

Altair

Does setting the hidden class on all the gender elements actually work without javascript to remove it under some circumstance? – Quitrent

Answer 4

You can use this code snippet ...

<html>
  <body>
     <form>
          <input type="radio" name="color" value="black" required />
          <input type="radio" name="color" value="white" />
          <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Specify "required" keyword in one of the select statements. If you want to change the default way of its appearance. You can follow these steps. This is just for extra info if you have any intention to modify the default behavior.

Add the following into you .css file.

/* style all elements with a required attribute */
:required {
  background: red;
}

For more information you can refer following URL.

https://css-tricks.com/almanac/selectors/r/required/

Molding