Dropdown Menu Form

Install

pnpm exec vegastack-design verify dropdown-menu-form

pnpm dlx shadcn@4.21.0 add @vegastack/dropdown-menu-form

Usage

import {
  DropdownMenuAtPoint,
  DropdownMenuInput,
  DropdownMenuSwitchItem,
} from "@/components/ui/dropdown-menu-form";

<DropdownMenuAtPoint point={point} onClose={() => setPoint(null)}>
  <DropdownMenuInput
    passArrows
    aria-label="Name"
    value={name}
    onChange={(event) => setName(event.target.value)}
  />
  <DropdownMenuSwitchItem
    label="Required"
    hint="A row can't be saved without it."
    checked={required}
    onCheckedChange={setRequired}
  />
</DropdownMenuAtPoint>;

DropdownMenu is the upstream menu and stays as it is; these parts compose it.

• DropdownMenuInput is an Input whose keys stay its own: typing, arrows, Home and End do not reach the menu's arrow-key and type-ahead handling. Escape and Tab still do. With passArrows, ArrowUp and ArrowDown also pass, so a name field at the top of a menu can hand the keyboard to the rows below it.
• DropdownMenuSwitchItem is a checkbox item drawn as a switch row: a click anywhere on the row toggles, it keeps a menu item's focus and keys, and an optional hint sits under the label.
• DropdownMenuAtPoint opens a menu beside a point in the viewport, for a request that has no trigger to hang from (a "+" at the end of a header, a context click).
• stopMenuTyping(event) is the same guard for a field that is not an Input (a textarea, a number field).

Anatomy

Examples

A field's menu

API Reference

DropdownMenuInput

DropdownMenuSwitchItem

DropdownMenuAtPoint

Accessibility

• The switch row is one menuitemcheckbox; the switch inside it is decorative (inert and hidden from assistive tech), so the state is read once.
• The point trigger is invisible, aria-hidden and not a focus stop.

Do / Don't