Switch vs. Checkbox vs. Radio
/ <input type="checkbox" role="switch"> · <input type="checkbox"> /
also called toggle switch, check box, radio button, option button
A switch controls a binary setting and communicates that the change takes effect immediately, like turning notifications on. A checkbox represents an independent form value and may wait for Save or Submit; several checkboxes can be selected. Radio buttons form a named group in which choosing one option clears the others.
Anatomy — every part, named
- 1Switch thumb
role="switch"“The little circle that slides left and right” is the switch thumb.
- 2Switch track
role="switch"“The rounded pill behind the moving circle” is the switch track.
- 3Checkbox checkmark
<input type="checkbox">“The tick that appears inside the square box” is the checkbox checkmark.
- 4Radio selection dot
<input type="radio">“The filled dot inside the chosen circle” is the radio selection dot.
Prompt — paste into your agent
Use an <input type="checkbox" role="switch"> for the binary on/off setting, a native <input type="checkbox"> for each independent checked choice, and same-name <input type="radio"> controls when exactly one option is allowed. Give every control a visible clickable label and expose its checked state through the native control.
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | <input type="checkbox" role="switch"> | |
| HTML | <input type="checkbox"> | |
| HTML | <input type="radio"> | |
| shadcn/ui | Switch | |
| shadcn/ui | Checkbox |