Option Card
The answer the student picks. Every quiz question lives inside one of these.
Variants
Status
You'll cycle through these states every time a student answers: resting at default, hovering on approach, pressed on tap, error on wrong answer, disabled when the question is closed.
Selected
Shows the student their choice registered. The radio fills green so there's no doubt the tap landed.
Badge
Flags one option as new or recommended. One per question, and only when it means something. Don't use it just to add visual color.
Usage
Stack 2–4 of these for every multiple-choice question. Pass the same name prop to all of them so only one can be selected. Fire the error state after the student submits, not before they've had a chance to change their mind.
Combinations
Always pair it with a Primary Button below ("Check answer") and keep it disabled until a card is selected. Add a Progress Bar above the question to keep students oriented.
Do's & Don'ts
Do
- Always pass the same
nameto every card in the group. That's what makes single-selection work. - Fire the error state only after submission. Don't flag an answer as wrong while the student is still picking.
- Keep answer labels to one line. The card truncates at one line and long text just disappears.
Don't
- Don't use more than one badge per question. More than one and it stops meaning anything.
- Don't put disabled and error on the same card. Pick one signal. Two at once just confuses.
- Don't reach for this component outside quizzes. For settings or preferences, use a different selection pattern.
Related: Button (the "Check answer" action that submits the selection) · Progress Bar (tracks lesson progress in the header above the question)