Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

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>
    );
}