How to Assign a Checked Initial Value to the Radio Button

Solution with the checked attribute

If you want to assign a checked initial value to your radio button, you can use the HTML checked 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 checked="checked" for the <input> that we want to be initially checked.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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

Which is your favorite fruit?

Or you can just use the checked attribute without any value like the following.

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>