Inputs

Combobox

Filterable select for longer lists: one value, or several as removable chips, and an empty state when nothing matches. Autocomplete acts on a pick and keeps nothing selected.

Live example

Import

Each family is its own entry point, so a page loads only what it uses.

tsx

import { AutocompleteRoot, Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxRoot } from "@nibapp/ui/components/combobox";import { Field } from "@nibapp/ui/components/field";import { Spinner } from "@nibapp/ui/components/spinner";

Props

Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.

Combobox

Filterable picker over string-valued options. `multiple` switches to chips. For custom item rendering or async data, compose the parts instead.

Also takes ComboboxSingleProps | ComboboxMultipleProps.

ComboboxContent

Portal + positioner + popup. Children: <ComboboxEmpty> and <ComboboxList>.

Prop	Type	Default
side	ComponentProps<typeof BaseCombobox.Positioner>["side"]	"bottom"
align	ComponentProps<typeof BaseCombobox.Positioner>["align"]	"start"
sideOffset	number	6

Also takes .

ComboboxEmpty

Also takes the props of Base UI's Combobox.Empty.

ComboboxInput

Text field that filters the list; includes clear and open buttons.

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"
leading	ReactNode	—	Icon before the text (e.g. a search glyph).
trailing	ReactNode	—	After the text, before the buttons (e.g. a spinner while results load).
showClear	boolean	true	Show the ✕ button when a value is selected (in an autocomplete, when there's text). Default `true`.
clearLabel	string \| undefined	—	Accessible name of the ✕ button; default "Clear selection". A search field names what it clears.
showTrigger	boolean	true	Show the ⌃⌄ popup button. Default `true`.
className	string \| undefined	—	Classes for the frame.
inputClassName	ComponentProps<typeof BaseCombobox.Input>["className"]	—

Also takes the props of Base UI's Combobox.Input, except size and className.

ComboboxItem

Prop	Type	Default
icon	ReactNode	—
description	ReactNode	—
trailing	ReactNode	—
children	ReactNode	—

Also takes the props of Base UI's Combobox.Item, except children.

ComboboxList

Also takes the props of Base UI's Combobox.List.

Field

Label + control + description + error in one.

Prop	Type	Default	Description
label	ReactNode	—
hint	ReactNode	—	Muted trailing text in the label row — "Optional", a character count…
description	ReactNode	—
error	ReactNode	—	Forces the field invalid and shows this message. Omit to show the browser's validation message after Base UI validates the control.
orientation	"vertical" \| "horizontal"	"vertical"	`vertical` stacks label → control → description. `horizontal` puts the copy on the left and the control on the right — the settings-row layout for switches and compact selects.
nativeLabel	boolean	true	Set to `false` for button controls (Select, Combobox trigger) so clicking the label focuses rather than presses the trigger.
children (required)	ReactNode	—

Also takes the props of Base UI's Field.Root, except children.

Spinner

Minimal busy indicator: a quarter arc over a faint track, for buttons, inline loads and small regions. A region that holds placeholders while it loads is a `LoadingRegion`.

Prop	Type	Default	Description
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"
label	string	—	Accessible label; omit when a surrounding element already announces the busy state.

Also takes the props of a <svg> element, except children.