Selection Controls

Difficulty: Intermediate

Selection controls allow users to choose from predefined options rather than typing free-form text. HTML provides several selection mechanisms: checkboxes for multiple selections, radio buttons for single selection from a group, dropdown menus via <select> and <option>, and autocomplete suggestions via <datalist>. Choosing the right control depends on the number of options and whether single or multiple selection is needed.

Checkboxes (input type="checkbox") allow users to toggle individual options on or off independently. Each checkbox operates independently of the others, so users can select any combination. When multiple checkboxes share the same name attribute, they submit as an array of values. Each checkbox should have a unique value attribute that identifies what is being selected. Checkboxes are ideal when users can select zero, one, or many options from a set.

Radio buttons (input type="radio") allow users to select exactly one option from a group. Radio buttons that share the same name attribute form a group, and only one radio button within a group can be selected at a time. Clicking a different radio button in the group automatically deselects the previously selected one. Unlike checkboxes, once a radio button is selected, the user cannot deselect it without choosing a different option (unless you provide a 'None' option). Radio buttons are best for small sets of 2-5 mutually exclusive options.

The <select> element creates a dropdown menu. Each option is defined with an <option> element, and you can group related options using <optgroup>. Adding the multiple attribute converts the dropdown into a list box where users can select multiple options by holding Ctrl (Cmd on Mac). The size attribute controls how many options are visible at once. For long lists of options, <select> is preferred over radio buttons because it takes up less space.

The <datalist> element provides autocomplete suggestions for a text input. You connect a <datalist> to an input using the list attribute, which references the datalist's id. Unlike <select>, the user is not restricted to the predefined options -- they can type any value. This makes <datalist> ideal for fields where you want to suggest common values while still allowing custom entries. Browser support for <datalist> is excellent in modern browsers.

Code examples

Checkboxes for Multiple Selection

<fieldset>
  <legend>Select your skills:</legend>

  <label>
    <input type="checkbox" name="skills" value="html">
    HTML
  </label>

  <label>
    <input type="checkbox" name="skills" value="css">
    CSS
  </label>

  <label>
    <input type="checkbox" name="skills" value="javascript" checked>
    JavaScript
  </label>

  <label>
    <input type="checkbox" name="skills" value="react">
    React
  </label>
</fieldset>

Each checkbox shares the name 'skills' so they submit as a group. The checked attribute pre-selects JavaScript. Users can select any combination. The <fieldset> and <legend> group the checkboxes and provide an accessible group label.

Radio Buttons for Single Selection

<fieldset>
  <legend>Select your experience level:</legend>

  <label>
    <input type="radio" name="experience" value="beginner">
    Beginner (0-1 years)
  </label>

  <label>
    <input type="radio" name="experience" value="intermediate" checked>
    Intermediate (1-3 years)
  </label>

  <label>
    <input type="radio" name="experience" value="advanced">
    Advanced (3-5 years)
  </label>

  <label>
    <input type="radio" name="experience" value="expert">
    Expert (5+ years)
  </label>
</fieldset>

All radio buttons share name='experience', forming a mutual exclusion group. Only one can be selected at a time. The checked attribute sets the default selection to 'Intermediate'. Clicking a different option automatically deselects the current one.

Select Dropdown with optgroup

<label for="language">Preferred Programming Language:</label>
<select id="language" name="language" required>
  <option value="">-- Choose a language --</option>
  <optgroup label="Frontend">
    <option value="javascript">JavaScript</option>
    <option value="typescript">TypeScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="java">Java</option>
    <option value="go">Go</option>
  </optgroup>
  <optgroup label="Systems">
    <option value="rust">Rust</option>
    <option value="cpp">C++</option>
  </optgroup>
</select>

The <optgroup> element groups related options under a non-selectable label. The first option with an empty value serves as a placeholder; combined with required, it forces the user to make an active selection rather than accidentally submitting the placeholder.

Datalist for Autocomplete Suggestions

<label for="framework">Favorite Framework:</label>
<input type="text" id="framework" name="framework" 
       list="frameworks" placeholder="Type or select...">

<datalist id="frameworks">
  <option value="React">
  <option value="Vue">
  <option value="Angular">
  <option value="Svelte">
  <option value="Next.js">
  <option value="Nuxt">
  <option value="Astro">
</datalist>

The input's list attribute references the datalist's id. As the user types, matching suggestions appear in a dropdown. Unlike <select>, the user can also type a custom value that is not in the list. This is perfect for fields with common but not exhaustive options.

Key points

Radio buttons in the same group must share the same name attribute. If they have different names, they act as independent controls and multiple selections become possible.
Always include a placeholder <option> with an empty value as the first option in a required <select>. This forces users to make an active choice.
Wrap checkboxes and radio buttons in <label> elements. This makes the label text clickable, improving usability especially on mobile devices.

Concepts covered

checkbox, radio, select, option, datalist, optgroup