Menus

MenuCheckboxItem

An on/off setting in a Menu, with a check mark when it is on. Toggling it keeps the menu open, so several settings can change in one go.

import { MenuCheckboxItem } from "@/components/ouro/menu/menu";

Example

<MenuCheckboxItem checked={showNotes} onCheckedChange={setShowNotes}>Show notes</MenuCheckboxItem>

Use MenuRadioItem instead for one choice of several, and Switch for a setting on the page.

Type: MenuCheckboxItemProps.

checked: Type: boolean; Whether it is on, to control it; pass onCheckedChange with it.
children (required): Type: ReactNode; The setting's text.
defaultChecked: Type: boolean; Whether it starts on, uncontrolled.
disabled: Type: boolean; Shown, but cannot be toggled.
onCheckedChange: Type: ((checked: boolean) => void); Called with the new state when it is toggled.
shortcut: Type: MenuShortcut; The keys of its shortcut, shown at its end: ["mod", "b"].

Prop	Type	Description
`checked`	`boolean`	Whether it is on, to control it; pass `onCheckedChange` with it.
`children` (required)	`ReactNode`	The setting's text.
`defaultChecked`	`boolean`	Whether it starts on, uncontrolled.
`disabled`	`boolean`	Shown, but cannot be toggled.
`onCheckedChange`	`((checked: boolean) => void)`	Called with the new state when it is toggled.
`shortcut`	`MenuShortcut`	The keys of its shortcut, shown at its end: `["mod", "b"]`.

Keys for a shortcut, as Kbd takes them: ["mod", "e"] shows ⌘E on Apple platforms and Ctrl+E elsewhere.

type MenuShortcut = readonly string[] | (string & { 'Use an array: shortcut={["mod", "k"]}': never });