<input type="checkbox">
A checkbox is an independent yes/no choice; a radio button picks one option from a group.
Syntax
<input type="checkbox" name="agree" checked>Attributes
| Parameter | Type | Description |
|---|---|---|
| name | text | The name; radio buttons of one group share it. |
| value | text | What is sent when the item is selected (`on` by default). |
| checked | — | Optional. The item is selected initially. |
Examples
Checkboxes — several can be selected:
<p>Extras:</p>
<label><input type="checkbox" name="extra" value="sugar"> Sugar</label>
<label><input type="checkbox" name="extra" value="milk" checked> Milk</label>Radio buttons — only one per group with a shared name:
<p>Size:</p>
<label><input type="radio" name="size" value="s"> Small</label>
<label><input type="radio" name="size" value="m" checked> Medium</label>
<label><input type="radio" name="size" value="l"> Large</label>accent-color changes the colour of the controls:
<style>
input { accent-color: crimson; }
</style>
<label><input type="checkbox" checked> I agree to the terms</label>Notes
Wrap checkboxes in a <label>: then the text is clickable too. An unchecked checkbox is not sent to the server at all. A group of radio buttons is best wrapped in a <fieldset> with a <legend>.
See also
- <input> — An input field; its kind is set by the `type` attribute.
- <label> — A label for a form field.
- <fieldset>, <legend> — A group of related form fields with a `<legend>` title.
- type — The kind of an `<input>` field: from text and numbers to a date, colour and file.
Related recipes
In the tutorial
- Input types — The type attribute of input — text, email, password, numbers and sliders, dates, checkboxes, radio buttons, colour and file.