SelectMenu

Select with a custom listbox popup, for option lists that need descriptions, groups or a styled popup. Select-only combobox pattern (WAI-ARIA APG): focus stays on the trigger and the highlighted option is announced through aria-activedescendant. Use NativeSelect when the system picker is preferable (long lists on phones).

Import

import { SelectMenu } from "@jcsoftdev/ui/forms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/forms/select-menu.

Usage

<SelectMenu
  aria-label="Barber"
  options={barbers}
  placeholder="Pick a barber"
/>

Props

Prop	Type	Default	Description
options *	readonly (SelectMenuOption | SelectMenuGroup)[]		Options, optionally nested in labelled groups. A value of "" is a real option, not “nothing”.
value	string		Selected value (controlled). An unknown value or undefined shows the placeholder.
defaultValue	string
onValueChange	((value: string) => void)
placeholder	string		Shown while no option is selected. Defaults to the localized “Select…”.
name	string		Submits the value with a surrounding <form> through a hidden input.
required	boolean
invalid	boolean
size	"sm" | "md"	"md"
container	HTMLElement | null		Portal target for the popup. Defaults to document.body; pass an element to keep a scoped data-style.
material	"solid" | "glass" | "glass-clear" | "liquid" | "liquid-clear"		Popup surface material; see PopoverContent.
classNames	Partial<Record<SelectMenuPart, string>>		Per-part classes merged with cn; consumer classes win. className still targets the trigger and is merged last.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Keyboard
• Escape Closes
• Space Opens And Tab Closes
• Typeahead
• Groups
• Empty String Is An Option
• Inside Field
• Submits With AF Orm
• Disabled
• Controlled
• Spanish Placeholder

Source

packages/ui/src/forms/select-menu/select-menu.tsx