Checkboxes
A checkbox is a control for one independent yes or no. Ticking one says nothing about its neighbours, which is the whole difference between a checkbox and a radio button, and the reason a column of them can be read in any order. The six blocks here run from a single choice on a card up to a table that selects every row at once.
The state people get wrong is the mixed one. Indeterminate is not a third answer anyone can pick. It is what a parent shows when its children disagree, and it exists so a select-all box can be honest about a partial selection. Decide what clicking it does before you draw it; usually it fills the set, and clicking again empties it. The other quiet failure is the hit area. The row or the card is the control, not the little square inside it, and a checkbox that only responds on the box is a miserable thing to tap on a phone.
Preferences list
Best for
Settings and notification screens: a titled list where each row is a choice
Anatomy
Dark list header · rows with box, label, sub-label, badge, description · a link action · dashed dividers
Notification preferences
Choose which updates reach your inbox.
Feature cards
Best for
Plan add-ons and option pickers: each choice is a card, with read-only and disabled states
Anatomy
Grey list header · 2×2 Checkbox Cards: default, read-only, selected, disabled · 12px corners
Plan add-ons
Pick what to add to your plan.
Logo cards
Best for
Integrations and connected apps: the same cards led by a brand logo
Anatomy
Grey list header · 2×2 Checkbox Cards with 40px logos · 24px corners
Connected apps
Choose which apps can sync with your workspace.
Selectable table
Best for
Bulk actions on records: select all, select some, act on the selection
Anatomy
Header with count and Export / Archive · select-all box that turns mixed · one box per row
Transactions
3 rows selected
Permission groups
Best for
Roles and scopes: a parent box that follows its children and sets them
Anatomy
List header · groups with a mixed parent box · children indented 48px · brand boxes
Role permissions
Choose what editors can do in this workspace.
Logo card
Best for
One connected-app choice on its own: the Checkbox Card component
Anatomy
40px logo · label, sub-label, badge · description · trailing box · 24px corners
Using Checkboxes
Reach for it when
- Form values that a save commits, not settings that apply on the spot
- Selecting rows in a table for an action taken on the selection
- Nested scopes where a parent has to reflect and set its children
- Optional extras drawn as cards, several of which can be on at once
Reach for something else when
- A setting that takes effect the instant it is flipped: a switch reads as immediate
- Choices that exclude one another: radio buttons make the exclusivity visible
- Picking a few values out of a very long list: a searchable multi-select scales where a column of boxes stops
Where it shows up
Notification preferences
A settings screen where each row is its own yes or no (a channel, a digest, a mention alert) with a sub-label and a description doing the explaining the label has no room for.
Bulk table actions
Select some records, select them all from the header, then export or archive what is selected. The header box has to show the mixed state or the reader cannot tell a partial selection from none.
Permission groups
Roles and scopes, where a parent stands for a set of children. Ticking the parent grants the set, clearing one child drops the parent to mixed, and the indent is what makes the relationship readable.
Connected app pickers
Integrations presented as cards with the brand logo leading, where several are turned on at once and some are already fixed: read-only because an admin set them, or disabled because the plan excludes them.
Questions
When should I use a checkbox instead of a toggle switch?
A checkbox is for a value a form collects and a save commits, and it sits comfortably in a column with other checkboxes. A switch is for a setting that takes effect the moment it is flipped, with no save anywhere. If your checkbox applies instantly, people will still look for a save button; if your switch needs one, they will not.
What does an indeterminate checkbox mean?
It means some of the things this box stands for are on and some are not. It is a summary of children, never a value a person picks, so it belongs on a select-all box or a group parent and nowhere else. Clicking it normally selects everything under it, and clicking again clears them. It must be exposed as mixed rather than unchecked.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPCheckboxes
A checkbox is a control for one independent yes or no. Ticking one says nothing about its neighbours, which is the whole difference between a checkbox and a radio button, and the reason a column of them can be read in any order. The six blocks here run from a single choice on a card up to a table that selects every row at once.
The state people get wrong is the mixed one. Indeterminate is not a third answer anyone can pick. It is what a parent shows when its children disagree, and it exists so a select-all box can be honest about a partial selection. Decide what clicking it does before you draw it; usually it fills the set, and clicking again empties it. The other quiet failure is the hit area. The row or the card is the control, not the little square inside it, and a checkbox that only responds on the box is a miserable thing to tap on a phone.
Preferences list
Best for
Settings and notification screens: a titled list where each row is a choice
Anatomy
Dark list header · rows with box, label, sub-label, badge, description · a link action · dashed dividers
Notification preferences
Choose which updates reach your inbox.
Feature cards
Best for
Plan add-ons and option pickers: each choice is a card, with read-only and disabled states
Anatomy
Grey list header · 2×2 Checkbox Cards: default, read-only, selected, disabled · 12px corners
Plan add-ons
Pick what to add to your plan.
Logo cards
Best for
Integrations and connected apps: the same cards led by a brand logo
Anatomy
Grey list header · 2×2 Checkbox Cards with 40px logos · 24px corners
Connected apps
Choose which apps can sync with your workspace.
Selectable table
Best for
Bulk actions on records: select all, select some, act on the selection
Anatomy
Header with count and Export / Archive · select-all box that turns mixed · one box per row
Transactions
3 rows selected
Permission groups
Best for
Roles and scopes: a parent box that follows its children and sets them
Anatomy
List header · groups with a mixed parent box · children indented 48px · brand boxes
Role permissions
Choose what editors can do in this workspace.
Logo card
Best for
One connected-app choice on its own: the Checkbox Card component
Anatomy
40px logo · label, sub-label, badge · description · trailing box · 24px corners
Using Checkboxes
Reach for it when
- Form values that a save commits, not settings that apply on the spot
- Selecting rows in a table for an action taken on the selection
- Nested scopes where a parent has to reflect and set its children
- Optional extras drawn as cards, several of which can be on at once
Reach for something else when
- A setting that takes effect the instant it is flipped: a switch reads as immediate
- Choices that exclude one another: radio buttons make the exclusivity visible
- Picking a few values out of a very long list: a searchable multi-select scales where a column of boxes stops
Where it shows up
Notification preferences
A settings screen where each row is its own yes or no (a channel, a digest, a mention alert) with a sub-label and a description doing the explaining the label has no room for.
Bulk table actions
Select some records, select them all from the header, then export or archive what is selected. The header box has to show the mixed state or the reader cannot tell a partial selection from none.
Permission groups
Roles and scopes, where a parent stands for a set of children. Ticking the parent grants the set, clearing one child drops the parent to mixed, and the indent is what makes the relationship readable.
Connected app pickers
Integrations presented as cards with the brand logo leading, where several are turned on at once and some are already fixed: read-only because an admin set them, or disabled because the plan excludes them.
Questions
When should I use a checkbox instead of a toggle switch?
A checkbox is for a value a form collects and a save commits, and it sits comfortably in a column with other checkboxes. A switch is for a setting that takes effect the moment it is flipped, with no save anywhere. If your checkbox applies instantly, people will still look for a save button; if your switch needs one, they will not.
What does an indeterminate checkbox mean?
It means some of the things this box stands for are on and some are not. It is a summary of children, never a value a person picks, so it belongs on a select-all box or a group parent and nowhere else. Clicking it normally selects everything under it, and clicking again clears them. It must be exposed as mixed rather than unchecked.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
