W3.CSS — Checkboxes

Basic Checkbox

<input type="checkbox" class="w3-check"> Check me

Checkbox Styles

<!-- Default -->
<input type="checkbox" class="w3-check"> Default

<!-- Checked -->
<input type="checkbox" class="w3-check" checked> Checked

<!-- Disabled -->
<input type="checkbox" class="w3-check" disabled> Disabled

Checkbox Group

<div class="w3-row">
    <input type="checkbox" class="w3-check" name="option1" value="1"> Option 1
</div>
<div class="w3-row">
    <input type="checkbox" class="w3-check" name="option2" value="2"> Option 2
</div>
<div class="w3-row">
    <input type="checkbox" class="w3-check" name="option3" value="3"> Option 3
</div>

Checkbox Examples

<!-- Form with checkboxes -->
<form>
    <div class="w3-row">
        <input type="checkbox" class="w3-check" name="interest" value="html"> HTML
    </div>
    <div class="w3-row">
        <input type="checkbox" class="w3-check" name="interest" value="css"> CSS
    </div>
    <div class="w3-row">
        <input type="checkbox" class="w3-check" name="interest" value="javascript"> JavaScript
    </div>
    <button class="w3-button w3-blue">Submit</button>
</form>

<!-- Terms checkbox -->
<div class="w3-row">
    <input type="checkbox" class="w3-check" id="terms"> 
    <label for="terms">I agree to the Terms and Conditions</label>
</div>

Checkbox with Label

<label>
    <input type="checkbox" class="w3-check"> Subscribe to newsletter
</label>

<label>
    <input type="checkbox" class="w3-check" checked> Receive notifications
</label>

Mini Practice

Create HTML code that:

1. Creates a basic checkbox
2. Adds a checkbox group
3. Creates a form with checkboxes
4. Uses checkboxes with labels

Up Next

Next: Learn about W3.CSS Radio Buttons.