React - Form Inputs Catalog

Overview

Estimated time: 15–25 minutes

Quick reference for controlled inputs beyond text: checkbox, radio groups, select (single/multiple), and textarea.

Try it: Checkbox

View source

function CheckboxDemo(){
  const [checked, setChecked] = React.useState(false);
  return (
    <label>
      <input type="checkbox" checked={checked} onChange={e => setChecked(e.target.checked)} />
      Accept terms ({String(checked)})
    </label>
  );
}
ReactDOM.createRoot(document.getElementById('try-checkbox')).render(<CheckboxDemo />);

Try it: Radio group

View source

function RadioDemo(){
  const [color, setColor] = React.useState('red');
  return (
    <div role="radiogroup">
      {['red','green','blue'].map(c => (
        <label key={c} style={{marginRight:8}}>
          <input type="radio" name="color" value={c} checked={color===c} onChange={e => setColor(e.target.value)} />
          {c}
        </label>
      ))}
      <div>Selected: {color}</div>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('try-radio')).render(<RadioDemo />);

Try it: Select (single)

View source

function SelectDemo(){
  const [lang, setLang] = React.useState('js');
  return (
    <label>Language:
      <select value={lang} onChange={e => setLang(e.target.value)}>
        <option value="js">JavaScript</option>
        <option value="ts">TypeScript</option>
      </select>
    </label>
  );
}
ReactDOM.createRoot(document.getElementById('try-select')).render(<SelectDemo />);

Try it: Select (multiple)

View source

function MultiSelectDemo(){
  const [langs, setLangs] = React.useState(['js']);
  function onChange(e){
    const opts = Array.from(e.target.selectedOptions).map(o => o.value);
    setLangs(opts);
  }
  return (
    <label>Languages:
      <select multiple size={3} value={langs} onChange={onChange}>
        <option value="js">JavaScript</option>
        <option value="ts">TypeScript</option>
        <option value="py">Python</option>
      </select>
      <div>Selected: {langs.join(', ')}</div>
    </label>
  );
}
ReactDOM.createRoot(document.getElementById('try-multiselect')).render(<MultiSelectDemo />);

Try it: Textarea

View source

function TextareaDemo(){
  const [bio, setBio] = React.useState('');
  return (
    <label>Bio:
      <textarea value={bio} onChange={e => setBio(e.target.value)} rows={4} cols={40} />
    </label>
  );
}
ReactDOM.createRoot(document.getElementById('try-textarea')).render(<TextareaDemo />);

Syntax primer

Checkbox: checked + onChange(e.target.checked).
Radio: share a name and control via a state value.
Select (single): value is a string; (multiple): value is an array of strings.
Textarea: control via value like inputs.

Common pitfalls

Mixing controlled and uncontrolled state – stick to one approach.

Checks for Understanding

How do you control a checkbox vs a radio group in React?
What’s different about a multiple select’s value?

Show answers

Checkbox uses checked and onChange(e.target.checked); radios share a name and bind a single state value.
It’s an array of strings representing the selected options.

Exercises

Add a disabled state to inputs and ensure UI reflects it accessibly.
Create a dependent select (choose category, then filter sub-options) using controlled state.
Turn the demos into a single form that summarizes all chosen values.

« Prev: React - TypeScript with React Next: React - Text Inputs & Validation »