Checkbox

“I agree to the Terms.” “Remember me.” “Leave at the door.” “Select all.” You tick boxes like these dozens of times a week, usually without thinking. That’s exactly why checkbox bugs are so sneaky: the box you can’t tap, the “Select all” that lies about how many emails you’re deleting, the marketing consent that was ticked for you.

A checkbox is also where UI testing meets legal testing. Let’s learn both sides.

What is a checkbox?

A checkbox is a small square the user ticks to say “yes, include this”. Each checkbox is independent: ticking one doesn’t untick the others. And, unlike a toggle switchToggle switchAn on/off control that applies a setting immediately, like Wi-Fi or Dark mode.Open in glossary →, ticking a checkbox usually does nothing on its own. The choice is applied when the user presses a button like Continue, Save or Pay.

You’ll see checkboxes used for:

• A single yes/no in a form: I agree to the Terms, Remember me, Billing address is the same as delivery.
• Picking several items from a list: cuisines in a food app filter, newsletter topics, pizza toppings.
• Bulk actions: ticking emails, photos or files, then pressing Archive or Delete.
• Consent: Send me offers by email, Share my data with partners.

Anatomy

The states

A checkbox has more states than “ticked or not”. Each one needs testing:

State	Looks like	Meaning
Unchecked	Empty box	Not selected
Checked	Filled box with a tick	Selected
Mixed (indeterminate)	Filled box with a dash	Parent of a list where some children are checked
Disabled	Faded, keeps its tick or not	Can’t be changed right now
Error	Red box + error text	A required box was left unchecked
Focused	Ring or highlight around it	Keyboard focus is here (web, external keyboards)

Checkbox vs toggle switch vs radio button

The fastest way to spot a wrong component is to ask two questions: can the user pick more than one? and does it apply immediately?

Component	How many?	When it applies	Example
Checkbox	Zero, one or many	On Submit / Save	Toppings, “I agree to the Terms”
Toggle switch	One setting, on/off	Immediately	Dark theme, Wi-Fi
Radio buttons	Exactly one of a few	Usually on Submit	Standard / Express delivery
Segmented control	Exactly one of 2–5	Immediately	Day / Week / Month

See also the radio button, toggle switch and segmented control pages.

Designs & variants

The idea is the same everywhere, but the platforms disagree on what it looks like. iOS doesn’t even have one.

Every checkbox here works. Click the label text too, and try Tab + Space.

Dark

Leave at the doorCutlery and napkinsHelp us cut down on plasticRing the bell

Remember meGift wrap this order (+€3.00)

Save this card for next timeBilling address is the same as delivery

Cuisines

ItalianJapaneseMexicanVegan

• Unchecked
• Checked
• Mixed
• Focused
• Disabled
• Disabled on
• Error
• Error on

“Select all” and the mixed state

A parent checkbox that controls a list is one of the most bug-prone patterns in any app. The rule is simple, and it must hold after every click:

2 selected Archive

• SkyJetYour boarding pass for Lisbon
• FreshCartYour groceries are on the way
• City GymNew spin classes this week
• Bank of NowhereYour monthly statement is ready
• BookNest3 hotels you might like

What the parent should show

No child checkedUnchecked

Some children checkedMixed (dash)

All children checkedChecked

2/5 selected · aria-checked="mixed"

Try: uncheck one email, check them all one by one, click the parent while it shows a dash, archive everything. The count, the parent and the Archive button must always agree.

Reset

What happens when you click a parent that shows a dash? Most apps select all, some clear all. Both are fine if the behavior is consistent and matches the spec. What’s never fine: the parent saying “all” when it isn’t, or a count that disagrees with the ticks.

When to use it

A checkbox is the right choice when:

• The user can pick any number of options, including none: Wi-Fi, Parking, Pool.
• There’s one optional yes/no in a form: Remember me, Send me a copy.
• The user must actively agree to something before continuing: I accept the Terms.
• The choice is applied later, when the user presses a button.

Good and bad uses

Also avoid checkboxes when the user must pick exactly one option (use radio buttons) and for a single setting that applies immediately (use a switch).

Common bugs

#	Bug	What you see	Typical severity
1	Label not clickable	Tapping the text does nothing, only the tiny box reacts	Medium
2	“Select all” out of sync	Parent stays ticked after you untick one item, never shows mixed, or the count is wrong	High (if it drives a bulk delete)
3	Pre-ticked consent	Marketing or data-sharing boxes are ticked by default	High (legal risk)
4	Not keyboard operable	A custom checkbox can be focused but Space doesn’t toggle it, or it can’t be focused at all	High (for affected users)
5	Required box not enforced	The form submits without “I agree”, or only the browser checks it and the server accepts the request anyway	High
6	Error not explained	A required box turns red with no text, or the error isn’t announced to screen readers	Medium
7	State lost	Ticks disappear after going Back, rotating, or a validation error elsewhere on the form	Medium
8	Disabled but clickable	A greyed-out box can still be toggled by tapping or with the keyboard	Medium
9	Long labels break	Text wraps under the box, gets truncated, or overlaps at large font sizes	Low–Medium
10	Silent screen reader	VoiceOver / TalkBack doesn’t say “checkbox”, “checked” or the label	High (for affected users)

Find the bug

This travel site’s sign-up flow has six checkbox bugs. Explore it like a tester:

• Click the text next to each box, not just the box.
• Try to continue without ticking anything. Read the screen carefully.
• On step 2, use Select all, then untick one topic. Watch the count.
• Use only the keyboard: Tab to each checkbox and press Space.
• Go to step 2 and press Back. Is everything as you left it?

🐞 Bug hunt: Travel site sign-up

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

trips.example.com/join

TripsyStep 1 of 2

Create your account

Email

I agree to the Terms of Service and Privacy Policy

Send me travel deals and partner offers by email

Continue

Use the mouse and the keyboard (Tab, Space).

Start over

1. 1

   Hint: Click the words "I agree to the Terms…" instead of the box.

   Clicking the Terms text does nothing

   Only the tiny 14 px box reacts. The text is a plain <span>, not a <label> connected to the checkbox. Compare it with the marketing checkbox below it, where the text works. Expected: clicking the label toggles the box, and the touch target is large enough to hit easily.

   Reveal answer✓ I found this
2. 2

   Hint: Look at the second checkbox before touching anything, then check the summary at the end.

   Marketing consent is pre-ticked

   "Send me travel deals and partner offers" starts ticked, and the final summary says Marketing emails: Yes although the user never chose that. Expected: consent boxes are unticked by default, so the user opts in actively. Under GDPR a pre-ticked box is not valid consent.

   Reveal answer✓ I found this
3. 3

   Hint: On step 2, press Tab until a topic is focused, then press Space.

   Topic checkboxes ignore the Space key

   The rows are focusable <div role="checkbox"> elements with only a click handler. Space does nothing (the page may scroll instead), so keyboard and switch-control users can’t pick topics. Expected: Space toggles a focused checkbox, as it does for a native <input type="checkbox">.

   Reveal answer✓ I found this
4. 4

   Hint: Tick Select all, then untick "Car rental". Look at the parent and the count.

   "Select all" doesn’t update when you untick one topic

   The parent stays fully ticked and still says 5 selected, although only 4 are. It never shows the mixed (dash) state. Ticking all five one by one also leaves the parent unticked. Expected: the parent and the count are always calculated from the children: none = unchecked, some = mixed, all = checked.

   Reveal answer✓ I found this
5. 5

   Hint: Enter a valid email, leave the Terms unticked and press Continue.

   Terms error has no message

   Nothing happens except a thin red outline around the box. There is no text and nothing is announced, so screen reader users (and many sighted users) don’t know why they’re stuck. The email error, by contrast, shows a clear message. Expected: a visible error text like "Accept the Terms to continue", connected to the checkbox and announced.

   Reveal answer✓ I found this
6. 6

   Hint: Tick Terms, untick marketing, continue, then press Back.

   Going Back resets the checkboxes on step 1

   The email is kept, but Terms is unticked again and marketing is ticked again. A user who presses Continue a second time without noticing is now subscribed to marketing. Expected: all choices are kept when navigating back and forth (state persistence).

   Reveal answer✓ I found this

How to test it

Checklist

Checkbox test checklist

0 of 13 checked

Copy

• Default states match the spec, and consent or marketing boxes are unticked by default
• Tapping the box AND the label toggles it, and the touch target is at least 44×44 pt / 48×48 dp
• Each checkbox is independent (ticking one does not change another, unless it is a parent)
• Parent "Select all" shows unchecked / mixed / checked correctly after every single change
• Counts and bulk actions ("Delete 3 items") always match the ticked items
• Required boxes block submission with a clear, visible error text that is announced
• The server rejects a request without the required consent (not only the UI)
• Ticks survive Back navigation, rotation, app backgrounding and validation errors elsewhere
• Disabled boxes look disabled and cannot be toggled by touch or keyboard
• Long labels wrap with the box aligned to the first line, also at the largest text size and in other languages
• Checked, unchecked and mixed are distinguishable without color, in light and dark mode
• Web: Tab reaches each checkbox, Space toggles it, and the focus ring is visible
• Screen reader announces label, "checkbox" and the state (checked / not checked / mixed)

Example test cases

Accessibility

• Use the real thing if you can. A native <input type="checkbox"> gets keyboard support, form submission and screen reader announcements for free. Inspect custom checkboxes with DevToolsDevToolsDeveloper tools built into browsers for inspecting pages, network traffic and errors.Open in glossary →. See ARIAARIAHTML attributes that tell assistive technology what custom elements are and what state they're in.Open in glossary →.
  Dev note

  Custom checkboxes need role="checkbox", aria-checked (true, false or mixed), tabindex="0" and a Space key handler.
• Connect the label. The label makes the text clickable and gives the checkbox its spoken name. On mobile, make the whole row the touch targetTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary →: 44×44 pt on iOS, 48×48 dp on Android.
  Dev note

  <label for> (or wrapping the input in a <label>).
• Group related boxes. A set like “Email me about” belongs in a group, so screen readersScreen readerSoftware that reads the screen aloud for blind and low-vision users, like VoiceOver or TalkBack.Open in glossary → read the question before the options.
  Dev note

  A <fieldset> with a <legend>.
• Announce errors. A required box needs a visible error text, and the error should be announced. A red outline alone fails users who can’t see it.
  Dev note

  Link the error with aria-describedby; announce it, for example, with role="alert".
• Not color alone. The tick or dash shape must show the state. The box border needs at least 3:1 contrast against the background (WCAGWCAGThe Web Content Accessibility Guidelines, the main international standard for accessibility.Open in glossary →).
• Keyboard (web): Tab moves between checkboxes (each one is its own tab stop, unlike radio buttons), and Space toggles. Enter usually submits the form instead.

Mobile vs web

iOSAndroidWeb

• No native checkbox. Multi-select uses checkmarks in lists, selection circles in edit mode, or custom-drawn boxes.
• For custom boxes, VoiceOver should say something like “Leave at the door, button, selected” or “checkbox, checked” depending on how it’s built. Silence or just “button” is a bug.
• Test at the largest Dynamic Type sizes: long consent labels must wrap, not truncate.
• Check that the whole row is tappable, not just the drawn box.

• Material 3 checkboxes have an 18 dp box inside a 48 dp touch target, and support a tri-state (indeterminate) mode.
  Dev note

  Checkbox (Compose) or CheckBox (Views).
• In lists, the whole row is usually tappable. Test tapping the text.
  Dev note

  Compose Modifier.toggleable on the row.
• TalkBack announces “Checked” / “Not checked” plus the label. Test with font scale, display size and dark theme.
• Watch for state lost after rotation or process death (Don’t keep activities in Developer options helps).

• Native <input type="checkbox"> looks different in each browser. Custom ones are very common, so check keyboard and ARIA.
• The required attribute and disabled buttons are client-side only. Make sure the server validates consent too.
• Test the browser Back button and a page reload: are ticks restored or reset as the spec says?
• Check indeterminate parents, bulk actions and counts on long, paginated lists (“Select all 50 on this page” vs “all 1,240”).

Check your understanding

Quick quiz

0/5 answered · 0 correct

1. 1.In a "Choose your pizza toppings" form with an Add to cart button, which control fits best?

   ARadio buttonsBCheckboxesCToggle switchesDA segmented control

2. 2.You tick "Select all" in an inbox, then untick one email. What should the parent checkbox show?

   ACheckedBUncheckedCMixed (a dash)DDisabled

3. 3.A sign-up form has "Send me offers by email" ticked by default. What do you do?

   ANothing, users can untick itBReport it: consent should be an active opt-inCReport it as a cosmetic bugDUntick it and move on

4. 4.A custom checkbox can be focused with Tab, but Space does nothing. Who is affected most?

   ANobody, mouse users can click itBKeyboard and switch-control usersCOnly Safari usersDUsers with slow internet

5. 5.The Continue button stays disabled until "I agree to the Terms" is ticked. Is that enough?

   AYes, the user can't continueBNo, the server must also reject requests without consentCYes, if the box is redDNo, the box should be pre-ticked

Key takeaways

• Checkboxes are independent and usually apply on Submit. Exactly one choice → radio buttons. Instant on/off → toggle switch.
• States to test: unchecked, checked, mixed, disabled, error, focused, in light and dark mode.
• A “Select all” parent must always match its children: none = unchecked, some = mixed, all = checked, and counts must agree.
• The label is part of the target. Tapping the text must toggle the box.
• Consent boxes must not be pre-ticked, and required boxes must be enforced on the server with a clear, announced error.
• Custom checkboxes need Space to work, plus the right role and state for screen readers.