Model Selector

A searchable list of models grouped by provider.

Anatomy

A search input sits above a filtered list. Each item carries an icon, a name, and a small bit of meta text on the right. Groups carry a label and the items underneath. The list always shows. Filtering reacts to the input as the user types.

Variants

default is the framed look for inline use. The panel carries its own surface, ring, and rounding, ready to drop next to a label or into a settings card.

plain strips the frame so the selector sits cleanly inside a container that already owns the surface. Reach for it inside a popover, a dialog, or a document body where a double frame would feel boxy.

Selection

The autocomplete tracks the input string, not the picked item. Use the per-item onClick to know which model the user chose. It fires on pointer click and on Enter when the item is highlighted, which is what the keyboard user expects.

onValueChange on the root reports the input string. Use it to keep the search query in your own state, never as a selection signal.

Inside a popover or dialog

Render the selector with the plain variant inside the parent surface. Reset the search query in the open-change-complete callback so the input clears after the close animation finishes, not during it. Resetting on the moment of close causes the list to refilter mid-fade, which reads as lag.

API

Reference for each part of the component, including its available props and behavior.

ModelSelector

Root of the picker. Wraps the autocomplete with inline mode forced on so the list is always rendered, never as a floating popup. The wrapping div carries the variant frame and forwards every remaining prop to the autocomplete root, so the same patterns from Base UI apply.

ModelSelectorInput

The search field. As the user types, the autocomplete filters the items against the input string. Focus stays here while the user navigates the list with arrow keys.

ModelSelectorList

The scrollable region that holds the items. Pass a function as children to iterate the filtered groups. Filtering, ordering, and grouping all come from the autocomplete store, so the children function only renders what is actually visible.

ModelSelectorEmpty

Shown when no items match the current query. Renders only after the store has confirmed an empty result, which keeps screen readers from being told the list is empty on every keystroke.

ModelSelectorGroup

A wrapper for one provider. Pass the group's items so the inner ModelSelectorCollection can iterate over the filtered subset.

ModelSelectorGroupLabel

The header above a group. Carries the provider name and styles it as a muted small label.

ModelSelectorCollection

The render-prop iterator inside a group. Receives each filtered item and returns the JSX for one row. The collection reads from the autocomplete store, so any item that does not match the query is skipped.

ModelSelectorSeparator

A thin divider between sections. Use it to break up a flat list or to set off a special section like recents.

ModelSelectorItem

A single row. Carries the icon, text, and meta slots, plus the highlight state. The value prop identifies the item, and the onClick prop is where you commit the selection.

ModelSelectorItemIcon

Left slot for the provider logo or a generic icon. The slot sets a fixed size and a muted tone, so any SVG or image drops in without extra styling.

ModelSelectorItemText

Middle slot for the model name. Takes the available width and truncates when the row is too narrow.

ModelSelectorItemMeta

Right slot for a short bit of meta text. Pushes itself to the end of the row and renders in a smaller muted tone, ready for context windows, tier badges, or pricing.