Skip to main content
Frontend Glossary

UI components · Form input

Checkbox

Also called: Check box, Tick box, Multi-select checkbox

A small box you can check and uncheck, for picking several options from a group or confirming a single item like "I agree to the terms."

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

For "Areas of interest," use a horizontal group of checkboxes: Frontend, Backend, Design, Product. Allow up to 3. Once 3 are checked, disable the rest. Clicking the label text should also toggle the box. Below that, add a separate "I have read and agree to the Terms of Service" checkbox, and keep the submit button disabled until it's checked.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Checkbox is what you need.

Use Checkbox when

  • Picking any number of options from a group, like interests, permissions, or fields to export
  • A single item that needs explicit confirmation, like agreeing to terms or staying signed in
  • Selecting multiple records in a table or list for bulk delete or bulk export

Pick something else when

  • When only one option in a group can be chosen. Use radio buttons.

    Use insteadRadio

  • When turning a setting on or off takes effect immediately

    Use insteadSwitch

  • When there are dozens of options or more. Use a multi-select dropdown or a transfer list.

    Use insteadSelectTransfer

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Using checkboxes for a one-choice-only option, so users check two and then get an error

  2. 02

    Only the tiny box is clickable, and clicking the label next to it does nothing

  3. 03

    Using checkboxes as instant toggles on a settings page, so users don't know whether they still need to click Save

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A small square with a text label on the right. It can be unchecked, checked (check mark), or indeterminate (dash). Several together form a checkbox group.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A checkbox is a small square. Click to check it, click again to uncheck. Checkboxes in a group don't affect each other, so you can pick as many as you like, such as several "Interests." A single checkbox often means confirmation, like "I have read and agree to the Terms of Service" or "Remember me." In tables, checkboxes select multiple rows for a Bulk Action, and the header has a select-all checkbox that shows a dash when only some rows are selected (the indeterminate state).

The checkbox, Radio, and Switch often get mixed up. Checkboxes allow multiple choices and are square. Radio buttons allow only one choice per group and are round, and picking another one automatically deselects the previous one. A switch turns a feature on or off and takes effect immediately. Checked boxes usually don't take effect until you click "Submit" or "Save."

Developer info
Term ID
component-checkbox
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • input[type="checkbox"]:not([role="switch"]):not([class*="Switch"]):not([class*="switch"])
  • [role="checkbox"]
  • .ant-checkbox-wrapper
  • .el-checkbox
  • [class*="MuiCheckbox-root"]
  • .arco-checkbox
  • .t-checkbox
  • .n-checkbox
  • [data-slot="checkbox"]
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026