MenuCheckItem

A menu row that can be checked, for view settings such as visible columns. It needs a selectionMode on the menu or on its MenuLabel group.

MenuCheckItem

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, MenuCheckItem

2 columns shown

Dark theme, MenuCheckItem

2 columns shown

High contrast theme, MenuCheckItem

2 columns shown

UsageLink to the section Usage

tsx

import { MenuCheckItem } from '@skribly/ui/overlays'

tsx

<DropdownMenu trigger={<Button>Columns</Button>} selectionMode="multiple" selectedKeys={keys} onSelectionChange={setKeys}>
  <MenuCheckItem id="title">Title</MenuCheckItem>
  <MenuCheckItem id="owner">Owner</MenuCheckItem>
</DropdownMenu>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A multiple selection gives menuitemcheckbox rows, a single one menuitemradio, each with aria-checked.
Checked rows show a check or a dot and bolder text, never colour alone.

This demo runs through axe in all three themes on every test run. See what the tests check.