W3docs
en
Log in

How to Assign a Checked Initial Value to the Radio Button

In this tutorial, find out how you can assign a checked initial value to the radio button with HTML. To achieve that goal, you need to use the checked attribute.

Tags

Solution with the checked attribute

If you want to assign a checked initial value to your radio button, you can use the HTML <span class="attribute">checked</span> attribute. In the example below, we use a <form> tag and add <div> elements within it. Inside our <div> elements, we add <input> and <label> tags and then use <span class="attribute">checked="checked"</span> for the <input> that we want to be initially checked.

Example of assigning a checked value by using <span class="attribute">checked="checked"</span>:

Example of assigning a checked value by using checked="checked":

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <p>Which is your favorite fruit?</p>
   <form action="/form/submit" method="get">
     <div>
       <input type="radio" id="apple" name="fruite" value="apple" checked="checked" />
       <label for="apple">Apple</label>
     </div>
     <div>
       <input type="radio" id="banana" name="fruite" value="banana" />
       <label for="banana">Banana</label>
     </div>
     <br />
     <input type="submit" value="Submit" />
   </form>
 </body>
</html>
Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> Which is your favorite fruit?

<form action-xhr="/form/submit" method="post"> <div> <input checked="checked" id="apple" name="fruite" type="radio" value="apple"> </input> <label for="apple">Apple</label> </div> <div> <input id="banana" name="fruite" type="radio" value="banana"> </input> <label for="banana">Banana</label> </div> <input type="submit" value="Submit"> </input> </form> </div> Or you can just use the <span class="attribute">checked</span> attribute without any value like the following.

Example of assigning a checked value by using the <span class="attribute">checked</span> attribute without a value:

Example of assigning a checked value by using the checked attribute without a value:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <p>Which is your favorite fruit?</p>
   <form action="/form/submit" method="get">
     <div>
       <input type="radio" id="pineapple" name="fruite" value="pineapple" />
       <label for="pineapple">Pineapple</label>
     </div>
     <div>
       <input type="radio" id="orange" name="fruite" value="orange" checked />
       <label for="orange">Orange</label>
     </div>
     <div>
       <input type="radio" id="kiwi" name="fruite" value="kiwi" />
       <label for="kiwi">Kiwi</label>
     </div>
     <div>
       <input type="radio" id="mango" name="fruite" value="mango" />
       <label for="mango">Mango</label>
     </div>
     <br />
     <input type="submit" value="Submit" />
   </form>
 </body>
</html>
Try it Yourself »