November 12, 2022

How to Align Radio Buttons Vertically in HTML

In this tutorial, you will learn how to align radio buttons vertically in HTML. The radio buttons are typically small circles, which are filled when selected. When you are creating a form, you may want to create radio button groups, so that the user can select only one radio button in a given group.

The radio buttons are horizontally aligned by default. There are numerous ways to align them vertically, but for the sake of simplicity, we will wrap them with a div element so that each radio button takes an entire space. You can also go with flexbox approach to achieve the same.

In the following example, we have two horizontally aligned radio buttons and we will align them vertically using the approach mentioned above. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have multiple elements such as div, h3, and input. The parent div element is just a wrapper for the rest of the elements.
The h3 is a heading tag with some text content.
We have 2 inputs with type value set to radio. Each input element is wrapped with a div element.
The div is a block-level element and it defines a division/section in an HTML document. As a result, both radio buttons will be aligned vertically.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vertically align radio buttons</title>
</head>

<body>
    <div>
        <h3>Vertically Align Radio Buttons</h3>
        <div>
            <input type="radio" name="gender" value="male">Male

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

</body>

</html>

You May Also Like: