HTML checked Attribute

Introduction

The checked attribute is a fundamental feature in HTML, primarily associated with <input> elements of type checkbox or radio. It allows developers to preselect these controls so they appear selected when the page loads.

What You’ll Learn

Purpose of checked

The primary purpose of the checked attribute is to set the initial state of a checkbox or radio button. When the attribute is present, the control is selected by default when the page loads. This is useful for newsletter opt-ins, remembered preferences, or a default choice in a radio group.

📝 Syntax

Add the boolean checked attribute to a checkbox or radio input:

<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">Subscribe to newsletter</label>

Syntax Rules

• Boolean attribute—presence means selected; omit for unchecked.
• Valid only on input type="checkbox" and input type="radio".
• Do not write checked="false"—any value still checks the box in HTML.
• Always associate inputs with a <label for="...">.
• For radios, use the same name within a group and check only one by default.

💎 Values

The checked attribute is a boolean attribute, meaning it does not require a value. It can be present or absent:

• Present — The checkbox or radio button is selected by default when the page loads.
• Absent — The control is not selected initially.

<!-- Checked by default -->
<input type="checkbox" checked>

<!-- Unchecked (omit checked) -->
<input type="checkbox">

<!-- Wrong: still checked in HTML -->
<input type="checkbox" checked="false">

Applicable Elements

Examples Gallery

Checkbox example with checked and dynamic JavaScript .checked property.

<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">Subscribe to newsletter</label>

<input type="checkbox" id="dynamicCheckbox">

<script>
  // Set the checkbox to be checked dynamically
  document.getElementById("dynamicCheckbox").checked = true;
</script>

♿ Accessibility

• Always use labels — Connect every checkbox and radio to a <label> so assistive tech announces the purpose.
• Pre-checked opt-ins — Be cautious pre-checking marketing checkboxes; some regulations require explicit consent.
• Radio groups — Wrap related radios in a <fieldset> with a <legend>.
• Visible focus — Ensure custom styles do not hide the focus ring on checked controls.
• State is announced — Screen readers report checked/unchecked; do not rely on color alone.

💡 Best Practices

• Use the checked attribute to set the initial state of checkboxes or radio buttons when you want them selected by default.
• If you need to change the state dynamically based on user interactions, use JavaScript to set the checked property.
• Keep in mind that checked is specific to checkboxes and radio buttons. For other input types, use alternative attributes such as value or selected.