The checked Attribute

Technical Deep Dive & Specifications

HTML Boolean Attribute Rules

In standard HTML5, checked is a Boolean attribute.

The WHATWG specification defines a boolean attribute by a strict rule: The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

Valid Ways to Declare a Checked Element:
  <input type="checkbox" checked>
  <input type="checkbox" checked="">
  <input type="checkbox" checked="checked">

FATAL MISTAKE (Still evaluates to TRUE!):
  <input type="checkbox" checked="false">  <-- TRUE! (Attribute is present!)

[!WARNING] In HTML, writing checked="false" does NOT uncheck the box! Because the string "false" is present, the parser treats the boolean attribute as active (true). To make an element unchecked in raw HTML markup, you must completely omit the attribute.

DOM Property vs HTML Attribute: defaultChecked vs checked

When the browser parses HTML containing checked, it populates two distinct properties on the HTMLInputElement DOM interface:

+-------------------------------------------------------------------------------+
|                       DOM PROPERTY REFLECTION MATRIX                          |
+-------------------------------------------------------------------------------+

  1. HTML Parsed:
     <input type="checkbox" id="opt" checked>
        |
        +---> element.defaultChecked = true  (Reflects the HTML content attribute)
        +---> element.checked        = true  (The live interactive user state)

  2. User Clicks the Checkbox (Unchecks it):
        +---> element.defaultChecked = true  (UNCHANGED! Initial markup is preserved)
        +---> element.checked        = false (UPDATED to reflect user action)

  3. JavaScript calls form.reset():
        +---> Browser copies defaultChecked into checked:
              element.checked = element.defaultChecked (Becomes true again!)

The Form Reset Lifecycle

When a user triggers <button type="reset"> or script calls form.reset(), the browser executes the following algorithm:

1. Iterates over all submittable controls within the form.
2. For text inputs, assigns input.value = input.defaultValue.
3. For checkboxes and radio buttons, assigns input.checked = input.defaultChecked.

The CSS :checked Pseudo-Class

The CSS :checked pseudo-class matches any <input type="checkbox">, <input type="radio">, or <option> that currently has checked === true.

By combining :checked with CSS sibling combinators (+ or ~) or the modern :has() selector, you can build complex, animated UI widgets entirely in CSS without a single line of JavaScript.

CSS Selector Engine Combinators:
  input:checked + label           -> Targets label immediately following checked input
  input:checked ~ .alert-box      -> Targets sibling element anywhere after checked input
  .card:has(input:checked)        -> Targets parent card containing checked input

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 77 (checked): Declares the switch as active by default. This initializes both defaultChecked = true and checked = true.
• Lines 54–63 (:checked + .slider): When the hidden input is checked, the adjacent .slider span turns green (#10b981) and shifts the inner circle 22px to the right via CSS transforms.
• Lines 64–67 (:focus-visible): Ensures full accessibility compliance by displaying a prominent focus ring when the user tabs to the hidden switch.
• Lines 100–108 (Reset Listener): Demonstrates that pressing "Reset Form" automatically reverts checked back to its initial defaultChecked (true).

Expected Browser Render Output

+-----------------------------------------------+
| Account Security Preferences                  |
|                                               |
| Two-Factor Authentication (2FA)       ( [O] ) |  <-- Green Switch ON
|                                               |
| defaultChecked: true                          |
| live checked:   true                          |
|                                               |
| [ Reset Form ]                                |
+-----------------------------------------------+