Skip to content

SwitchBank

Settings that come in a grid (notifications by event and channel, permissions by role and resource, a schedule by day) as a bank of Switches in a Table, one where each row meets each column. A Checkbox in each column header flips the whole column and shows a dash when it's mixed. A real table, so every Switch is read with its row and column.

Feel A bank of switches on a panel: flip one, or flip a whole column at once.

Preview

Notifications
NotificationsEmailPushSMS
Mentions
Replies
Weekly digest
Security alerts

Or let the agent fetch it: get_component("switch-bank") on the Echo MCP server.

Installation

npx echo-ui-cli add switch-bank

First time? Run npx echo-ui-cli init once — it sets the project up, and add refuses to run before it.

At a glance

Version
0.3.0
Weight
5.4 KB · 42.9 KB with what it imports · 2.7 KB of CSS (minified and gzipped; React not counted)
Needs
table (Echo, brought with it), switch (Echo, brought with it), checkbox (Echo, brought with it)
Keyboard
Every Switch is also named by its column and row ("Push, Mentions"), for anyone moving by Tab.
Reduced motion
Switches and Checkboxes change without travel, as they always do.
Sound
Each Switch and Checkbox clicks as it always does, inside a SoundProvider.

Usage

tsx
import { SwitchBank } from "@/echo/switch-bank";

<SwitchBank label="Notifications" columns={[{ value: "email", label: "Email" }]} rows={[{ value: "mentions", label: "Mentions" }]} />

Composition

SwitchBank
  Table
    a Checkbox in each column header
    a row header for each row
    a Switch where each row meets each column

Examples

Notifications

Events by channel.

tsx
<SwitchBank
  label="Notifications"
  columns={[{ value: "email", label: "Email" }, { value: "push", label: "Push" }, { value: "sms", label: "SMS" }]}
  rows={[{ value: "mentions", label: "Mentions" }, { value: "replies", label: "Replies" }]}
  defaultValue={["mentions:email", "mentions:push"]}
/>

Controlled

The keys that are on, in your state.

tsx
<SwitchBank label="Permissions" columns={roles} rows={resources} value={grants} onValueChange={setGrants} />

Accessibility

  • A table captioned by label, with column and row headers, so a screen reader reads each Switch with where it sits.
  • Every Switch is also named by its column and row ("Push, Mentions"), for anyone moving by Tab.
  • Each column's Checkbox is named "All" and the column, and is mixed when only some of the column is on.
  • name submits every key that's on with a form.

Tested against WCAG 2.2 AA on every release:

  • axe — No axe violations, in the component's own gallery and on its page.
  • keyboard — Every action is reachable and operable from the keyboard alone.
  • focus-visible — Focus is visible on every focusable part, in normal and forced-colors mode.
  • forced-colors — State stays visible when the look's colours are replaced by the system's.
  • target-size — Every target's real hit area is at least 24×24px, at every density.
  • reflow — Content reflows into 320px and survives a doubled text size.

Not covered: screen-reader: not yet verified by a person. Everything above is a machine check; a person has not yet driven this component with a screen reader.

Motion & sound

Motion tokens
springs
Reduced motion
Switches and Checkboxes change without travel, as they always do.
Sound
Each Switch and Checkbox clicks as it always does, inside a SoundProvider.

Props

SwitchBank props
PropTypeDefault
idThe element's id, so a <label for> or an aria-describedby can reach it.string
nameThe field's name in a form submission, and the key react-hook-form registers.string
disabledbooleanfalse
requiredboolean
readOnlyboolean
autoFocusFocus this control when it mounts. One per page, at most.boolean
onBlurFired on focus loss. react-hook-form validates onTouched and onBlur with it.function
onFocusFired when the control takes focus.function
onKeyDownKeyboard handling you own — Enter to send, Escape to clear. Runs before Echo's.function
label requiredWhat the bank sets: the table's caption ("Notifications").string
hideLabelHide the caption visually; it still names the table.booleanfalse
columns requiredThe columns: the channels, roles or days.object[]
rows requiredThe rows: the events, resources or times.object[]
valueWhat's on, as "row:column" keys (controlled).string[]
defaultValuestring[]
onValueChangeCalled with every "row:column" key that's on.function

Anti-patterns

  • Never use a SwitchBank for settings that don't form a grid: a list of Switches in rows reads better.
  • Never let it grow past what fits: more than five columns is a table people scroll sideways through; split it.

Changelog

  • v0.3.0 · 2026-10-12 · ChangedEvery item needs echo-ui-core 0.3.0 (all components). The drawn device, readability past AA and the design tests live in core, and the components that use them are built against it, so each item now declares echo-ui-core >=0.3.0 <0.4.0. Update core with the items: npm install echo-ui-core@^0.3.0 (or your package manager's), then npx echo-ui-cli update. An item whose files didn't change is the same code under a new version; the 0.2.0 files stay published.
  • v0.2.0 · 2026-10-04 · AddedSwitchBank: settings that come in a grid. A Table of Switches, one where each row meets each column (notifications by channel, permissions by role), with a Checkbox in each column's header that flips the whole column and shows a dash when it's mixed. Every Switch is named by its column and row.
  • v0.2.0 · 2026-10-04 · ChangedComments only, no behaviour change. Comments in the component source used to cite documents, milestones and ticket numbers from Echo's own planning, none of which exist in your project. The citations are gone and the sentences around them stay. Where a comment was only a citation, it now says what it meant. Three development warnings (HardwareButton's engraved/caption checks and StatusDot's missing-label check) also dropped the ticket code at the end of the message. echo-ui diff will show changes in most items; none of them are to code.
  • v0.2.0 · 2026-10-04 · ChangedAn item's version is now a function of declared data, not of how the changelog is formatted. The version an item ships under is published once and never rewritten, and it used to be inferred from prose: a regex for a bolded "Breaking" run across the whole unreleased section, and attribution by "does a bullet mention this name in backticks". One breaking entry therefore moved every item that changed that cycle, and an entry explaining that "Menu and Sheet are unchanged here" filed itself as a change to Menu and Sheet — which it really had.
  • v0.2.0 · 2026-10-04 · ChangedThe agent brief says Echo has not shipped. llms.txt and the MCP server's instructions led with npx echo-ui-cli init, and that name on npm is a reserved stub with no executable — so a model following the brief wrote an install step that fails with npx's own error. The brief now opens with the caveat, and the docs carry it on every surface that shows a command. One switch (CLI_RELEASED) silences all of them at launch, and a test refuses to let one move without the others. Affects all components only in what the brief says about installing them; no item's props, CSS or rendered semantics change.
  • v0.2.0 · 2026-10-04 · ChangedEcho's home is echo-ui.com. The registry, the docs and the packages all move to it from echo.nawwara.studio. Nothing was published under the old host, so no echo.json anywhere points at it and there is nothing to migrate — this is the last release where that is true.
  • v0.2.0 · 2026-10-04 · ChangedWeights, line heights, letter-spacing, z-index, border widths and icon sizes come from the theme scales in all components, with the old value as a fallback, so components keep working with echo-ui-core@0.0.1. Strays moved to the nearest step: most by under a pixel; HardwareButton icons are 14/16/20px (were 15/17/19).
  • v0.2.0 · 2026-10-04 · FixedContent now reflows into a 320px screen (400% zoom) and survives a doubled browser text size (WCAG 1.4.10, 1.4.4), across all components. Select's 180px floor, NumberField's readout, Segmented and Steps as flex items, EmptyState's grid columns, and Avatar's fixed-pixel disc all gave way; Panel counts its padding inside a width you set (box-sizing: border-box), so a <Panel style={{ width: 220 }}> is now 220px wide overall rather than 260px.