Starter Lab Team Picker · Checkboxes & Radios
Checkboxes in every state: unchecked, pre-checked, disabled — plus a radio group. The live team summary updates on every change.
Pick your starters. The professor pre-checked one, and one is out sick.
Checkboxes & Radios is an easy Forms & Inputs challenge on Fun UI Playground. Checkboxes in every state: unchecked, pre-checked, disabled — plus a radio group. The live team summary updates on every change. It runs entirely in the browser, with no backend. Every interactive element carries a stable id and data-testid prefixed with “checkboxes-”, and the techniques it exercises are check / uncheck, read checked state, radio groups, disabled elements.
At a glance
- Category
- Forms & Inputs
- Difficulty
- easy
- Teaches
- check / uncheck · read checked state · radio groups · disabled elements
- Backend
- None — runs entirely in the browser
- Locators
- Stable
idanddata-testid, prefixedcheckboxes-
Selectors on this page
| Locator | What it is |
|---|---|
#checkboxes-ember #checkboxes-squirt #checkboxes-sprout | Checkboxes: #checkboxes-ember, #checkboxes-squirt (pre-checked), #checkboxes-sprout (disabled) |
[name="checkboxes-type"] | Radio group: input[name="checkboxes-type"] with values fire/water/grass |
#checkboxes-summary | Assert the live summary text in #checkboxes-summary — it is rebuilt on every change |
Frequently asked questions
How do I assert a checkbox is checked instead of just clicking it?
Read the checked state rather than counting clicks. #checkboxes-squirt starts pre-checked, so a blind click unchecks it. Assert the state you want after acting, and verify the summary text in #checkboxes-summary, which is rebuilt on every change.
How do I test a disabled checkbox?
#checkboxes-sprout is disabled and must stay unclickable. Assert the disabled state directly, and assert that its value never reaches #checkboxes-summary — a framework that silently reports success on a disabled element is exactly the bug worth catching.
More Forms & Inputs
- Central Perk Staff Login · Login Form
- The Sorting Ceremony · Dropdowns
- Barista Keypad · Inputs & Key Presses
- The Dundies · JavaScript Alerts
- Screenplay Submissions · File Upload
- The Apothecary Index · Autocomplete Combobox
- Time Circuits · Date Picker
- Customs Declaration · Native Form Validation
- All Forms & Inputs challenges
Updated
Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.