DropdownMenu·component·@astryxdesign/core

Dropdown Menu Checkbox Item

A checkable menu item (role="menuitemcheckbox") that toggles an independent boolean. Use for on/off options inside a DropdownMenu; for a one-of-N choice use DropdownMenuRadioGroup.

Open in Playground @astryxdesign/core/DropdownMenu

Showcases and examples

7 documented examples · Context from Dropdown Menu

Dropdown Menu

A button that opens a dropdown menu with action items. The menu starts open for preview.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · dropdown-menu-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';

export default function DropdownMenuShowcase() {
  return (
    <DropdownMenu
      button={{label: 'Actions'}}
      items={[
        {label: 'Edit', onClick: () => {}},
        {label: 'Duplicate', onClick: () => {}},
        {label: 'Delete', onClick: () => {}},
      ]}
    />
  );
}

Usage

A checkable menu item (role="menuitemcheckbox") that toggles an independent boolean. Use for on/off options inside a DropdownMenu; for a one-of-N choice use DropdownMenuRadioGroup.

Typed props

Prop	Type and behavior
`label`	`ReactNode` Primary label text identifying the item.
`description`	`ReactNode` Secondary description text displayed below the label.
`icon`	`IconType` Icon to display before the label. See `npx astryx docs icons` for valid semantic names.
`value`	`boolean` Whether the item is checked. Controlled; pair with onChange.
`onChange`	`(checked: boolean) => void` Callback fired with the next checked state when the item is toggled.
`isDisabled`	`boolean` · default false Whether the item is disabled. Disabled items stay focusable (via aria-disabled) so they remain discoverable by keyboard and assistive technology, but activation is blocked.
`hasCloseOnSelect`	`boolean` · default false Whether toggling the item closes the menu. Checkbox items default to staying open so several can be toggled in a single session.
`ref`	`React.Ref<HTMLElement>` Ref forwarded to the row root, the element carrying role="menuitemcheckbox". Register the row with an element-keyed observer or overlay.
`endContent`	`ReactNode` Content to render after the label and description, such as a keyboard shortcut hint or badge.