HTML checked Attribute

HTML checked Attribute

The HTML checked attribute is a Boolean attribute used with checkbox and radio <input> controls. When present, it specifies that the control should initially be checked when the page loads.

Syntax

The checked attribute is added to an <input> element whose type is checkbox or radio.

<input type="checkbox" checked>

Because checked is a Boolean attribute, its presence represents the true state and no value is required.

Attribute Value

Elements That Use the checked Attribute

The checked attribute applies to the <input> element when its type is checkbox or radio.

Using checked with Checkboxes

A checkbox can use checked when it should be selected by default.

<label>
  <input type="checkbox" name="newsletter" value="yes" checked>
  Subscribe to the newsletter
</label>

The checkbox appears checked when the form is initially displayed. The user can still clear or select the checkbox unless the control is disabled.

Using checked with Radio Buttons

The checked attribute can select the initial choice in a radio button group. Radio buttons in the same group share the same name value.

<label>
  <input type="radio" name="contact" value="email" checked>
  Email
</label>

<label>
  <input type="radio" name="contact" value="phone">
  Phone
</label>

Only one radio button in a group can have a checked state at a time. Selecting another radio button clears the previously selected button.

Initial State and User Changes

The checked content attribute defines the control's default checked state. After the page is displayed, the user can change the control's current checked state by interacting with it.

This distinction is important when working with JavaScript. The checked property represents the control's current checked state, while the HTML checked attribute establishes its default checked state.

<input type="checkbox" id="updates" checked>

If the user clears this checkbox, the control is no longer currently checked even though the original HTML contains the checked attribute.

Boolean Attribute

The checked attribute is a Boolean attribute. Its presence represents true, while its absence represents false.

<!-- Initially checked -->
<input type="checkbox" checked>

<!-- Initially unchecked -->
<input type="checkbox">

Do not use checked="false" to create an unchecked control. Because the attribute is present, the control is still initially checked. Remove the attribute entirely when the control should initially be unchecked.

The :checked Pseudo-Class

CSS provides the :checked pseudo-class for selecting checkbox and radio controls whose current checked state is true.

input:checked {
  outline: 2px solid #0088cc;
}

Unlike the HTML checked attribute, which defines the default checked state, the :checked pseudo-class responds to the control's current state as the user interacts with it.

Common Mistakes

Do not use checked="false" to make a checkbox or radio button unchecked. Boolean attributes are enabled by their presence.

<!-- Incorrect -->
<input type="checkbox" checked="false">

<!-- Correct -->
<input type="checkbox">

Do not use the checked attribute with input types other than checkbox and radio. It does not apply to other <input> states.

When creating a radio button group, avoid marking multiple controls in the same group with checked. Choose the single option that should be selected initially.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The checked attribute is widely supported on checkbox and radio <input> controls in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the checked Attribute

The example uses checked to initially select one checkbox and one radio button. You can interact with the controls to change their current checked states.

Summary

The HTML checked attribute is a Boolean attribute used with checkbox and radio <input> controls. When present, it establishes the control's initial checked state. Users can subsequently change the current checked state, and removing the attribute entirely is the correct way to specify that a control should initially be unchecked.