Components › Forms & input › Select › Check menu

Check menu

canon

The one menu for toggling a set of options (columns, tiles, categories): checkbox on the right, optional search, hidden items below a line, reorder by drag or Alt+↑/↓; bottom sheet with Hotovo on a phone.

AD 30 Sep 2026: canon again. The one menu for toggling a set of OPTIONS (column visibility, tile layout, category filter) with optional search, hidden-below-divider and reorder; RecordSelect multi stays the picker of RECORDS. Select has no multiple mode, so the old replacedBy was void. approvedAt after the stories show search, hidden items, keyboard reorder (Alt+↑↓) and the phone sheet. Registry repaired 17 Oct 2026 (review F1): apps/web/src/ds/check-menu.css no longer exists; reorder styling is in ds/reorder.css (step F4). Registry repaired 17 Oct 2026 (review F2): removed classes with no CSS definition and no TSX use on main: .cm-reorder, .cm-dragging, .cm-drop-line, .cm-sheet. Registry repaired 17 Oct 2026 (review F4/F11): attached css reorder.css.

Used in 4 files · 4 areas · 4× — components/activity, components/mail, components/record, components/segment

apps/web <CheckMenu>.acrm-popover .acrm-popover-item .acrm-checkbox .cm-list +3SourceStoryLegacy card popover.htmlLegacy card Inputs.html
ExamplesCodeUsageAccessibilityChangelog

The one menu for toggling a set of options: which columns a listing shows, which tiles a record section shows, which categories a timeline filters. App component CheckMenu (apps/web/src/components/CheckMenu.tsx) renders the DS <Popover> from @acrm/ui with .acrm-popover-item[role=menuitemcheckbox] rows: optional icon · label · .acrm-checkbox on the RIGHT. The menu stays open while toggling. Optional layers: search (searchPlaceholder), visible / hidden groups split by a line (group), reorder by drag or Alt+↑/↓ (onReorder). Below 720px the same rows open in a bottom sheet with Hotovo.

Status: canon (AD 30 Sep 2026). Lives app-side, not exported from @acrm/ui; the catalog stories render the markup it emits.

Check menu vs Record select multi

  • Check menu toggles options of the screen — a fixed, known set the user switches on and off (columns, tiles, categories). Each toggle applies immediately and the set can be ordered.
  • Record select multi picks records — people, companies, deals, tags — from a searchable, often async list, as the value of a field or a filter.
  • Select has no multiple mode; do not reach for it.

When to use

  • The column panel of a listing (+ at the end of the table header, Segment table): search, visible in table order, hidden below the line, reorder.
  • The ⚙ layout menu of a record section (LayoutMenu): visibility and order of tiles.
  • The category filter of the activity timeline (CategoryFilterChip).
  • Any place where several options are toggled one click at a time and the user keeps the menu open.

When not to use

  • One value — Picker menu / Nav select.
  • Records (people, companies, deals, tags) — Record select multi.
  • A form field with a framed trigger — Multi-select.
  • Actions — Menu button.

Anatomy

  • Anchor span[inline-flex] wrapping the caller's trigger (render prop gets open); align end by default.
  • Shell .acrm-popover (role="menu", aria-label): --surface-100, 1px --border-strong, --radius-md, --shadow-pop, padding: var(--sp-2).
  • Search (optional, searchPlaceholder): the canonical .acrm-recordselect-search row above the list; the list below gets .acrm-recordselect-list and scrolls under a standing search. Filtering folds diacritics ("mest" finds "Město") and covers both groups. While a query is typed, reorder is off. No match shows .acrm-popover-empty "Nic nenalezeno".
  • List div.cm-list; .cm-reorder only with onReorder.
  • Groups (optional, group per item): a .acrm-popover-sep line wherever the group changes — visible items first (in the order the screen shows them), hidden below the line.
  • Row button.acrm-popover-item[role=menuitemcheckbox]: 32px, 500 13px, optional .ic, .tx > .nm (one line, ellipsis), .acrm-checkbox 16px on the right, .is-on = --accent fill.
  • Reorder (check-menu.css): cursor: grab; .cm-dragging opacity: 0.45; .cm-drop-line 3px --accent with net zero height — values 1:1 with the board.
  • Phone (< 720px): BottomSheet .acrm-sheet.cm-sheet — grab, title (= ariaLabel), sticky search with a 44px target, the same rows, full-width primary Hotovo, scrim that closes on tap. No drag on a phone.
  • No header, no select-all, no footer in the popover; no accent .chk (select-one idiom).

Best practices

Do
  • Pass searchPlaceholder once the set is longer than ~8 options (the column panel always has it).
  • Keep visible items in the order the screen shows them and hidden ones below the line — the menu reads like the page.
  • Let the caller own checked and decide what "on" means; onToggle(key) applies at once.
  • Turn onReorder on only where order is visible to the user (columns, tiles); a filter set stays static.
  • Keep at least one option on where an empty set would break the screen (the last visible column cannot be hidden).
  • Mirror each item's icon from the thing it toggles.
Don’t
  • Close the menu on toggle or add "Použít" — every toggle is immediate.
  • Use it for records — that is Record select multi.
  • Invent a drag look (handles, shadows) — the board's 3px line is the one drag mechanic.
  • Add helper text about dragging or keys; the grab cursor and the keys are the affordance.
  • Build a local .xyz-menu with checkboxes — there is one Check menu.

Content

  • Item labels are the names of the things toggled ("Město", "Poznámky", "Dlaždice Fáze"); sentence case, no counts unless the page shows them.
  • ariaLabel names the set ("Sloupce", "Kategorie", "Rozložení"); on a phone it is the sheet title.
  • Search placeholder says what is searched ("Hledat sloupec…").
  • record-select — picking records, multi mode.
  • picker-menu — select-one counterpart.
  • segment-table — the column panel entry (+ at the end of the header).
  • checkbox (family Choice) — the .acrm-checkbox indicator.
  • Stories: components--check-menu--default, --variants (plain · search + groups · reorder), --states (on/off, search "mest", empty result, drag, trigger), --composition (layout menu, category filter, phone sheet "Sloupce").

Options added in acrm !4333

  • iconNode: custom drawing in the icon slot (e.g. the colour dot of a mail label).
  • actions: actions under a divider at the end of the list (e.g. „Nový štítek“), drawn as rows with a leading +.
  • checkboxes={false}: bulk mode without checkboxes — a click adds the item.
  • emptyLabel: text of the empty state.
  • On the phone the menu is a sheet with Done; opened from a dialog it is an InSheet panel with Done at the bottom (see popover usage).

Source: docs/select/check-menu.usage.md · GitLab