Radio
buttons.
Use radio buttons when learners need to pick exactly one option from a small, mutually exclusive set. They're the workhorse of eLearning questions — and the most commonly misused.
Single-choice, mutually exclusive options.
If only one answer can be correct — or if only one answer makes sense — radio buttons are the right call. Selecting one option automatically deselects the others.
- Knowledge-check questions with one correct answer.
- Scenario branching: which path do you take?
- Demographic or preference questions where one selection is required.
- Yes/no decisions (though a binary toggle is often better).
Anything with multiple correct answers.
If a learner could reasonably pick more than one, you need checkboxes, not radio buttons. Forcing a single selection on a multi-answer question feels broken, because it is.
- "Select all that apply" questions — use checkboxes.
- Options that aren't actually mutually exclusive.
- Lists of more than 7 options — use a dropdown instead.
- Long open-ended answers — use a text input.
Try it.
A typical eLearning knowledge check. Click an option to select it. Selecting a different option deselects the previous one — that's the defining behaviour of radio buttons.
Which of these requires immediate first aid?
Pick the option that needs the fastest response.
Selected. In a real course, this is where you'd advance to the next question or show feedback.
We've deliberately not shown a "correct/incorrect" state. That's a design choice — see the UX section below for when to give feedback and when not to.
Get the visuals right.
Target size
The radio circle itself should be at least 18px, and the full row (circle + label) should be clickable. A 4px circle in a sea of whitespace looks elegant and frustrates everyone with a touchscreen or imperfect motor control.
Visible selected state
The selected state has to be obviously different from the unselected state — colour change alone isn't enough. Use a filled inner dot, a tick, or an outline border. Don't rely on colour to communicate state to colourblind users.
Vertical, not horizontal
Stack radio buttons vertically by default. Horizontal layouts make it harder to scan options and break entirely on narrow screens. Reserve horizontal for binary choices where the labels are very short ("Yes / No").
Accessibility — semantics
Use real <input type="radio"> elements wrapped in <label> tags, grouped by a shared name attribute. The whole group should sit inside a role="radiogroup" container with a label. Screen readers announce the group, the selected state, and the total count automatically — but only if you use the right elements.
Accessibility — keyboard
Native radio buttons handle this for free: tab focuses the group, arrow keys move between options, space selects. If you build a custom-styled radio button, you need to replicate this behaviour exactly. Most "custom" radio buttons get this wrong.
Focus indicator
A keyboard-only user needs to see which option is currently focused. A 2px outline on the radio circle or the whole row, with at least 3:1 contrast against the background, is the minimum. Don't suppress the browser default unless you've replaced it with something better.
How to write questions that work.
Aim for 3 to 5 options.
Two options is usually a binary toggle, not radio buttons. Six or more starts overwhelming the learner and signals the question itself isn't focused enough. If you have 7+ options, break the question into two stages, or use a dropdown.
Avoid "all of the above" and "none of the above".
"All of the above" usually means you should've used checkboxes. "None of the above" is rarely a satisfying answer — and learners who don't know the material often pick it as a guess. Both options tend to short-circuit thinking rather than promote it.
Phrase options consistently.
All options should be parallel in structure and length. If one option is "Call your manager" (two words) and another is "Document the incident in detail and submit it to HR for review within 24 hours" (sixteen words), the long one stands out — and learners often pick it because it looks like the answer with the most thought behind it. Equal weight, equal length.
Write the question, then the right answer, then the distractors.
Distractors are the wrong answers. Good distractors are plausible misunderstandings — common misconceptions, half-truths, things a learner who's almost got it might pick. Bad distractors are obvious throwaways. If your question only works because three of the options are silly, the question doesn't really test anything.
Be careful with negatives.
"Which of these is not..." questions are confusing under cognitive load. If you must use one, bold or underline the "not" so it's obvious. Better: rephrase as a positive question.
Randomise option order — sometimes.
Many authoring tools let you randomise the order of options on each attempt. Randomising prevents learners from memorising "the answer is C." But if options have a natural order (smallest to largest, earliest to latest, simple to complex), keep the order. Random isn't always better.
Don't give the answer away.
Watch for grammatical clues: if three options start with "to" and the right one starts with "for", the giveaway is the grammar, not the knowledge. Watch for length too — instinct says the longest, most-qualified option is correct. Mix it up.
Feedback: timing matters.
Immediate per-question feedback works for low-stakes practice. End-of-quiz feedback works for summative assessment. What rarely works: showing the right answer immediately after a wrong guess in a high-stakes context. Learners stop reading rationales the moment they see "correct" or "incorrect."
Go deeper on question design.
The principles above apply specifically to radio-button (single-answer) questions. For a fuller treatment that covers all the question types — true/false, matching, ranking, hotspot, drag-and-drop — and how to choose between them, see Writing good assessment questions.
When you'd reach for radio buttons.
Knowledge check in compliance training
"Which of these would you do first if you spot a hazard?" — one right first action, four plausible options. Classic radio button question.
Branching scenario decisions
"How do you respond to this customer's complaint?" — three responses, each leading to a different next scene. Radio buttons drive the branch.
Pre-course self-assessment
"How confident do you feel with this topic? Not at all / A little / Confident / Very confident." Mutually exclusive levels — radio buttons, not checkboxes.
End-of-course feedback ratings
"How would you rate this course?" — a 5-point Likert scale. Each rating is one selection.
Want a course
built well?
We apply these principles on every course we build. Three-week delivery, transparent pricing, zero drama.