<input type="checkbox">
The <input type="checkbox"> HTML element represents a tickable box with two states, checked and unchecked.
Overview
The <input type="checkbox"> HTML element represents a tickable box with two states, checked and unchecked.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| HTML attribute | ||||||
| input elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. The exact appearance depends upon the operating system configuration under which the browser is running. Generally this is a square but it may have rounded corners. A checkbox allows you to… | 1 | 12 | 1 | 1 | 18 | 1 |
| DOM API | ||||||
| The indeterminate property of the HTMLInputElement interface returns a boolean value that indicates whether the checkbox is in the indeterminate state. For example, a "select all/deselect all" checkbox may be in the indeterminate state when some but not all of its sub-controls are checked. The indeterminate state can only be set via JavaScript and is only… | 1 | 12 | 3.6 | 3 | 18 | 1 |
Syntax
<label><input type="checkbox" name="agree" required> I agree to the Terms of Service</label>
<fieldset>
<legend>Hobbies</legend>
<label><input type="checkbox" name="hobby" value="sports"> Sports</label>
<label><input type="checkbox" name="hobby" value="music"> Music</label>
<label><input type="checkbox" name="hobby" value="reading"> Reading</label>
</fieldset>Live demo
Use cases
Using <input type="checkbox">
The <input type="checkbox"> HTML element represents a tickable box with two states, checked and unchecked.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.
Related links
Powered by web-features