Model Selector

The model a message goes to, and the menu that changes it: rows grouped by vendor, each wearing its vendor's mark, with a search box for the long lists.

Full screen

01Preview

02Installation

npx shadcn@latest add https://aiellie.app/r/model-selector.json

03API reference

From the Base UI documentation

Groups all parts of the menu. Doesn't render its own HTML element.

Props

Prop	Type	Default	Description
defaultOpen	boolean	false	Whether the menu is initially open. To render a controlled menu, use the `open` prop instead.
open	boolean	-	Whether the menu is currently open.
onOpenChange	((open: boolean, eventDetails: Menu.Root.ChangeEventDetails) => void)	-	Event handler called when the menu is opened or closed.
highlightItemOnHover	boolean	true	Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
actionsRef	React.RefObject<Menu.Root.Actions \| null>	-	A ref to imperative actions. `unmount`: Manually unmounts the menu. Call this after any externally controlled closing animation finishes.`close`: When specified, the menu can be closed imperatively.
closeParentOnEsc	boolean	false	When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu.
defaultTriggerId	string \| null	-	ID of the trigger that the menu is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open menu.
handle	Menu.Handle<Payload>	-	A handle to associate the menu with a trigger. If specified, allows external triggers to control the menu's open state.
loopFocus	boolean	true	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
modal	boolean	true	Determines if the menu enters a modal state when open. `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled.`false`: user interaction with the rest of the document is allowed. On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior. Nested menus ignore this prop, and menus opened by hover are never modal.
onOpenChangeComplete	((open: boolean) => void)	-	Event handler called after any animations complete when the menu is opened or closed.
triggerId	string \| null	-	ID of the trigger that the menu is associated with. This is useful in conjunction with the `open` prop to create a controlled menu. There's no need to specify this prop when the menu is uncontrolled (that is, when the `open` prop is not set).
disabled	boolean	false	Whether the component should ignore user interaction.
orientation	Menu.Root.Orientation	'vertical'	The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys.
children	React.ReactNode \| PayloadChildRenderFunction<Payload>	-	The content of the menu. This can be a regular React node or a render function that receives the `payload` of the active trigger.