Switches
Switches are two-state controls that apply their change the moment they are flipped, with no Save button and no confirmation step in between. The eight blocks here are mostly about what surrounds one: an integrations directory where each card connects one app, a grouped preferences list with a frequency dropdown and a locked row, connected accounts with a count strip that follows the switches, a matrix with a switch at every event-and-channel crossing, a consent list sitting above one category that cannot be turned off, and the switch alone as a card, a tile and a settings row.
That immediacy is the whole contract, which makes it an obligation too. A switch sitting inside a form with a Save button is lying about when it takes effect, and if a change needs confirming, a checkbox is the honest control. Because it commits straight away, it also has to survive a write that fails, returning to its old position by itself and saying why, rather than leaving a state on screen that the server never agreed to.
Integrations
Best for
App directories and connection screens: each card turns one integration on
Anatomy
Dark header with search · 2×2 integration cards: logo, category badge, description, Configure/Connect · drawer footer
Integrations
Connect the tools your team already uses.
Email preferences
Best for
Notification and subscription settings: grouped rows that apply the moment they are flipped
Anatomy
Dark list header · labelled groups · switch rows with description · a frequency dropdown · one locked row · stepper footer
Email preferences
Fine-tune what lands in your inbox.
General
Activity
Connected accounts
Best for
Social and sync settings: a count strip that follows the switches, with a broken account to repair
Anatomy
Active/Paused/Needs-action counts · account rows with mark, handle, sync time, status pill · brand switch or Reconnect · footer
Notification settings
Best for
Per-channel delivery: one row per event, one column per channel, a switch at every crossing
Anatomy
Grey list header · Email/Push/SMS column heads · switch matrix · an Activity rule cutting the rows in two · stepper footer
Notification settings
Pick a channel for each kind of update.
Data & privacy
Best for
Consent and tracking choices: optional categories over one that cannot be turned off
Anatomy
Grey list header · consent rows with a learn-more link · a Required row · live count in the footer
Data & privacy
Control what you share. You can change this anytime.
Switch card
Best for
A choice that needs a mark and a line of explanation: one branded toggle
Anatomy
360×81 card · 28px mark · label, sub-label and badge · description · 44px track
Integration card
Best for
App directory grids: the integration stacked, so the cards tile
Anatomy
360 tile · mark and track on the top row · label, sub-label and badge · description · Manage full width under the copy
Integration row
Best for
Settings lists of connected apps: the integration on one line
Anatomy
Mark · label, sub-label and badge · description · Manage and the 44px track trailing · wraps the action under the copy on a phone
Using Switches
Reach for it when
- A setting that takes effect the instant it is flipped: visibility, a digest, a feature
- Connecting or disconnecting an integration from a directory
- A grid of events against channels, where every crossing is independent
- Consent, where someone should see everything they are agreeing to at once
Reach for something else when
- Options submitted with the rest of a form: checkboxes read as pending until you save
- A destructive or irreversible change: a confirm dialog, since one stray tap should not be the whole interaction
- Picking one mode out of several: a segmented control or radio group, because a row of switches lets someone turn all of them off
Where it shows up
Notification channel matrix
One row per event and one column per channel with a switch at every crossing. The grid is the only layout that lets someone see an event is on for email and off for SMS without opening anything.
Integration directory
A grid of apps where each card carries a logo, a category and one control that connects or disconnects it. State is readable from the grid itself, so nothing has to be opened to check what is live.
Consent preferences
A privacy screen listing optional tracking categories above one that cannot be turned off. The required row is shown on and disabled with a reason, because hiding it makes the list look shorter than the truth.
Connected accounts
Linked social and sync accounts, each row carrying its handle, last sync time and status. A count strip above follows the switches, and an account that has broken offers Reconnect where the switch would sit.
Questions
What is the difference between a switch and a checkbox?
A switch applies its change immediately: flipping it is the action, and there is nothing further to submit. A checkbox records an intention that takes effect when the surrounding form is saved, which is why it belongs beside a Save or Submit button and a switch does not. If a change needs confirming before it is applied, the checkbox is the correct control.
How should a switch behave if saving the change fails?
It should return to the position it held before rather than staying in the new one, because leaving it flipped shows a state the server never accepted. Pair the reversal with a message naming what failed and offering a retry, so the person is not left guessing. Showing a brief pending state while the request is in flight is fine; silently keeping the new position is not.
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 MCPSwitches
Switches are two-state controls that apply their change the moment they are flipped, with no Save button and no confirmation step in between. The eight blocks here are mostly about what surrounds one: an integrations directory where each card connects one app, a grouped preferences list with a frequency dropdown and a locked row, connected accounts with a count strip that follows the switches, a matrix with a switch at every event-and-channel crossing, a consent list sitting above one category that cannot be turned off, and the switch alone as a card, a tile and a settings row.
That immediacy is the whole contract, which makes it an obligation too. A switch sitting inside a form with a Save button is lying about when it takes effect, and if a change needs confirming, a checkbox is the honest control. Because it commits straight away, it also has to survive a write that fails, returning to its old position by itself and saying why, rather than leaving a state on screen that the server never agreed to.
Integrations
Best for
App directories and connection screens: each card turns one integration on
Anatomy
Dark header with search · 2×2 integration cards: logo, category badge, description, Configure/Connect · drawer footer
Integrations
Connect the tools your team already uses.
Email preferences
Best for
Notification and subscription settings: grouped rows that apply the moment they are flipped
Anatomy
Dark list header · labelled groups · switch rows with description · a frequency dropdown · one locked row · stepper footer
Email preferences
Fine-tune what lands in your inbox.
General
Activity
Connected accounts
Best for
Social and sync settings: a count strip that follows the switches, with a broken account to repair
Anatomy
Active/Paused/Needs-action counts · account rows with mark, handle, sync time, status pill · brand switch or Reconnect · footer
Notification settings
Best for
Per-channel delivery: one row per event, one column per channel, a switch at every crossing
Anatomy
Grey list header · Email/Push/SMS column heads · switch matrix · an Activity rule cutting the rows in two · stepper footer
Notification settings
Pick a channel for each kind of update.
Data & privacy
Best for
Consent and tracking choices: optional categories over one that cannot be turned off
Anatomy
Grey list header · consent rows with a learn-more link · a Required row · live count in the footer
Data & privacy
Control what you share. You can change this anytime.
Switch card
Best for
A choice that needs a mark and a line of explanation: one branded toggle
Anatomy
360×81 card · 28px mark · label, sub-label and badge · description · 44px track
Integration card
Best for
App directory grids: the integration stacked, so the cards tile
Anatomy
360 tile · mark and track on the top row · label, sub-label and badge · description · Manage full width under the copy
Integration row
Best for
Settings lists of connected apps: the integration on one line
Anatomy
Mark · label, sub-label and badge · description · Manage and the 44px track trailing · wraps the action under the copy on a phone
Using Switches
Reach for it when
- A setting that takes effect the instant it is flipped: visibility, a digest, a feature
- Connecting or disconnecting an integration from a directory
- A grid of events against channels, where every crossing is independent
- Consent, where someone should see everything they are agreeing to at once
Reach for something else when
- Options submitted with the rest of a form: checkboxes read as pending until you save
- A destructive or irreversible change: a confirm dialog, since one stray tap should not be the whole interaction
- Picking one mode out of several: a segmented control or radio group, because a row of switches lets someone turn all of them off
Where it shows up
Notification channel matrix
One row per event and one column per channel with a switch at every crossing. The grid is the only layout that lets someone see an event is on for email and off for SMS without opening anything.
Integration directory
A grid of apps where each card carries a logo, a category and one control that connects or disconnects it. State is readable from the grid itself, so nothing has to be opened to check what is live.
Consent preferences
A privacy screen listing optional tracking categories above one that cannot be turned off. The required row is shown on and disabled with a reason, because hiding it makes the list look shorter than the truth.
Connected accounts
Linked social and sync accounts, each row carrying its handle, last sync time and status. A count strip above follows the switches, and an account that has broken offers Reconnect where the switch would sit.
Questions
What is the difference between a switch and a checkbox?
A switch applies its change immediately: flipping it is the action, and there is nothing further to submit. A checkbox records an intention that takes effect when the surrounding form is saved, which is why it belongs beside a Save or Submit button and a switch does not. If a change needs confirming before it is applied, the checkbox is the correct control.
How should a switch behave if saving the change fails?
It should return to the position it held before rather than staying in the new one, because leaving it flipped shows a state the server never accepted. Pair the reversal with a message naming what failed and offering a retry, so the person is not left guessing. Showing a brief pending state while the request is in flight is fine; silently keeping the new position is not.
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.
