DropdownMenu·component·@astryxdesign/core

Dropdown Menu Radio Group

A single-select group of radio menu items (role="group" of menuitemradio). Owns the selected value and lays its items out with the menu's inter-item gap.

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-select group of radio menu items (role="group" of menuitemradio). Owns the selected value and lays its items out with the menu's inter-item gap.

Typed props

Prop	Type and behavior
`value`	`string \| undefined` The currently selected value in the group. Pass undefined when nothing is selected yet.
`onChange`	`(value: string) => void` Callback fired when the selected value changes.
`label`	`string` Accessible name for the group, applied as aria-label so screen readers announce the radios as a named set, e.g. "Sort by". Required. Pass aria-labelledby (via base props) instead when the name already exists as a visible element.
`hasCloseOnSelect`	`boolean` · default true Whether selecting a value closes the menu. Radio items default to closing on selection (a single-choice commit).
`children`	`ReactNode` The DropdownMenuRadioItems that make up the group.