MenuLabel

A labelled group of menu rows with a dividing line before it. A group can hold its own selection, such as one theme mode next to plain actions.

MenuLabel

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, MenuLabel

Dark theme, MenuLabel

High contrast theme, MenuLabel

UsageLink to the section Usage

tsx

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

tsx

<MenuLabel label="Theme mode" selectionMode="single" selectedKeys={mode} onSelectionChange={setMode}>
  <MenuCheckItem id="light">Light</MenuCheckItem>
  <MenuCheckItem id="dark">Dark</MenuCheckItem>
</MenuLabel>

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

The group has role="group" and is named by its visible label, so a screen reader says "Theme mode, group" when entering it.

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