DropdownMenu·component·@astryxdesign/core

Dropdown Menu Radio Item

A single option in a DropdownMenuRadioGroup (role="menuitemradio"). Must be used inside a 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 single option in a DropdownMenuRadioGroup (role="menuitemradio"). Must be used inside a DropdownMenuRadioGroup.

Typed props

Prop	Type and behavior
`value`	`string` The value this item represents within its group. The group's value matches against this to determine the checked state.
`label`	`ReactNode` Primary label text identifying the option.
`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.
`isDisabled`	`boolean` · default false Whether this individual radio item is disabled. Disabled items stay focusable (via aria-disabled) so they remain discoverable by keyboard and assistive technology, but selection is blocked.
`endContent`	`ReactNode` Content to render after the label and description, such as a badge or metadata.
`ref`	`React.Ref<HTMLElement>` Ref forwarded to the row root, the element carrying role="menuitemradio". Register the row with an element-keyed observer or overlay.