W3.CSS — Radio Buttons

Basic Radio Button

<input type="radio" class="w3-radio" name="gender" value="male"> Male

Radio Button Group

<div class="w3-row">
    <input type="radio" class="w3-radio" name="gender" value="male" checked> Male
</div>
<div class="w3-row">
    <input type="radio" class="w3-radio" name="gender" value="female"> Female
</div>
<div class="w3-row">
    <input type="radio" class="w3-radio" name="gender" value="other"> Other
</div>

Radio Button Styles

<!-- Default -->
<input type="radio" class="w3-radio" name="option" value="1"> Default

<!-- Checked -->
<input type="radio" class="w3-radio" name="option" value="2" checked> Checked

<!-- Disabled -->
<input type="radio" class="w3-radio" name="option" value="3" disabled> Disabled

Radio Button Examples

<!-- Form with radio buttons -->
<form>
    <div class="w3-row">
        <input type="radio" class="w3-radio" name="size" value="small"> Small
    </div>
    <div class="w3-row">
        <input type="radio" class="w3-radio" name="size" value="medium" checked> Medium
    </div>
    <div class="w3-row">
        <input type="radio" class="w3-radio" name="size" value="large"> Large
    </div>
    <button class="w3-button w3-blue">Submit</button>
</form>

<!-- Radio with label -->
<label>
    <input type="radio" class="w3-radio" name="color" value="red"> Red
</label>
<label>
    <input type="radio" class="w3-radio" name="color" value="blue"> Blue
</label>

Radio Button Group with Cards

<div class="w3-row-padding">
    <div class="w3-col m4">
        <div class="w3-card-4 w3-padding">
            <input type="radio" class="w3-radio" name="plan" value="basic"> Basic Plan
        </div>
    </div>
    <div class="w3-col m4">
        <div class="w3-card-4 w3-padding">
            <input type="radio" class="w3-radio" name="plan" value="pro" checked> Pro Plan
        </div>
    </div>
    <div class="w3-col m4">
        <div class="w3-card-4 w3-padding">
            <input type="radio" class="w3-radio" name="plan" value="enterprise"> Enterprise Plan
        </div>
    </div>
</div>

Mini Practice

Create HTML code that:

1. Creates a basic radio button
2. Adds a radio button group
3. Creates a form with radio buttons
4. Uses radio buttons with labels

Up Next

Next: Learn about W3.CSS Select.