<input> — Selection

The selection-type input elements let you create form controls that allow users to choose from multiple options. Checkboxes allow multiple selections, while radio buttons allow only one selection at a time.

Syntax

<!-- Checkbox (multiple selections allowed) -->
<input type="checkbox" name="fruit" value="apple"> Apple

<!-- Radio button (only one selection per group with the same name) -->
<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="blue"> Blue

<!-- Pre-selected by default -->
<input type="checkbox" name="agree" value="yes" checked> I agree

Attributes

Attribute	Description
type="checkbox"	Displays a checkbox. Multiple options can be selected at the same time.
type="radio"	Displays a radio button. Only one option can be selected within a group sharing the same `name`.
name	Specifies the key name for the form data. Radio buttons with the same `name` form a group.
value	Specifies the value sent to the server when the control is selected.
checked	Pre-selects the control when the page loads. This is a boolean attribute and requires no value.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Selection Input</title>
</head>
<body>

  <form>
    <!-- Checkboxes (multiple selections allowed) -->
    <p>Favorite foods (select all that apply):</p>
    <input type="checkbox" name="food" value="sushi"> Sushi
    <input type="checkbox" name="food" value="ramen" checked> Ramen
    <input type="checkbox" name="food" value="tempura"> Tempura

    <!-- Radio buttons (select one only) -->
    <p>Favorite season (select one):</p>
    <input type="radio" name="season" value="spring"> Spring
    <input type="radio" name="season" value="summer" checked> Summer
    <input type="radio" name="season" value="autumn"> Autumn
    <input type="radio" name="season" value="winter"> Winter

    <p><button type="submit">Submit</button></p>
  </form>

</body>
</html>

Result

The checkboxes display with "Ramen" pre-checked, allowing multiple selections. The radio buttons display with "Summer" pre-selected, and only one option can be chosen at a time.

Rendered HTML Preview

Overview

Use checkboxes (type="checkbox") when you want users to independently select multiple items, such as "I agree" or "Receive notifications." Use radio buttons (type="radio") when the choices are mutually exclusive — for example, gender or payment method. It is important that radio buttons in the same group share the same name attribute.

The value attribute holds the value sent to the server on form submission. If you omit value on a checkbox, the string "on" is sent instead — always set an explicit value.

To associate a label with a control, use the label element. Clicking the label also toggles the checkbox or radio button, which increases the clickable area and improves usability.