Checkbox, Radio, and Select Inputs

Checkboxes use the checked prop and read e.target.checked in the onChange handler rather than e.target.value. A group of checkboxes representing a set of selections is best stored as an array or a Set in state; toggling a value means adding it if absent or removing it if present. Radio button groups share a name attribute and are controlled by comparing the current state value against each radio's value. Setting checked={state === radioValue} and updating state to the selected radio's value in onChange gives you a straightforward controlled radio group. The select element works much like a text input: set value to the current selection and update state in onChange. For multi-select, set the multiple prop and manage an array of selected values. Iterating over Array.from(e.target.selectedOptions) and mapping to option.value is the cleanest way to collect multiple selected values.

Example

import { useState } from 'react';

function PreferencesForm() {
    // Checkbox group (multiple selections)
    const [interests, setInterests] = useState([]);

    function toggleInterest(value) {
        setInterests(prev =>
            prev.includes(value)
                ? prev.filter(v => v !== value)
                : [...prev, value]
        );
    }

    // Radio group (single selection)
    const [level, setLevel] = useState('beginner');

    // Select dropdown
    const [country, setCountry] = useState('');

    function handleSubmit(e) {
        e.preventDefault();
        console.log({ interests, level, country });
    }

    return (
        <form onSubmit={handleSubmit}>
            {/* Checkboxes */}
            <fieldset>
                <legend>Interests</legend>
                {['React', 'TypeScript', 'Node.js', 'GraphQL'].map(val => (
                    <label key={val}>
                        <input
                            type="checkbox"
                            checked={interests.includes(val)}
                            onChange={() => toggleInterest(val)}
                        />
                        {val}
                    </label>
                ))}
            </fieldset>

            {/* Radio */}
            <fieldset>
                <legend>Level</legend>
                {['beginner', 'intermediate', 'advanced'].map(val => (
                    <label key={val}>
                        <input
                            type="radio"
                            name="level"
                            value={val}
                            checked={level === val}
                            onChange={() => setLevel(val)}
                        />
                        {val}
                    </label>
                ))}
            </fieldset>

            {/* Select */}
            <select value={country} onChange={e => setCountry(e.target.value)}>
                <option value="">-- Select country --</option>
                <option value="us">United States</option>
                <option value="gb">United Kingdom</option>
                <option value="de">Germany</option>
            </select>

            <button type="submit">Save</button>
        </form>
    );
}

HTML

Full Editor

Related Resources

React Reference

Complete tag & property list

React How-To Guides

Step-by-step practical guides

React Exercises

Practice what you've learned