Forms

ComboField

One value, typed or picked: a text field with a menu under it.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`label`	`string`
`ariaLabel`	`string`
`items`Required	`TagFieldItem[]`
`value`	`string \| null`	Picker: the chosen key (null for none) and onChange.
`onChange`	`(key: string \| null) => void`
`onCreate`	`(text: string) => void`	Lets what was typed become a new item ("Add brand “Halo Audio”"). Picker only.
`createLabel`	`(text: string) => string`
`inputValue`	`string`	Suggester: the text is yours, items are the suggestions to show, onPick takes one.
`onInputChange`	`(text: string) => void`
`onPick`	`(item: TagFieldItem) => void`
`loading`	`boolean`	While suggestions are being looked up: a quiet row in the menu.
`loadingText`	`string`
`placeholder`	`string`
`icon`	`IconName`
`size`	`'M' \| 'L'`
`help`	`string`
`invalid`	`boolean`
`emptyText`	`string`
`autoFocus`	`boolean`
`id`	`string`
`className`	`string`

Guidelines

One value, typed or picked: a text field with a menu under it. It works two ways.

As a picker (value, onChange): typing filters the items, the chevron shows them all, and with onCreate a last row adds what was typed when nothing matches ("Add brand “Halo Audio”"). Use it where one choice comes from a list that can grow, like a product's brand.
As a suggester (inputValue, onInputChange, onPick): the text stays what you type, and the menu offers matches the app looked up (real product names from the web, say). Set loading while it looks; the menu shows a quiet "Looking for matches" row. Picking one hands the item to onPick.

Provide: items ({ key, label, detail }), a visible label or an ariaLabel, and one of the two modes above. Optional createLabel(text), loadingText, placeholder, icon, size (M, or L on phones), help, invalid, emptyText, autoFocus.

For several choices use TagField; for a short fixed list a Picker; for a handful of visible options a TagGroup.
The menu shows up to eight suggestions, or up to fifty items as a picker (it scrolls). The chosen item has a check.
Keyboard: Up and Down move through the menu, Enter picks, Escape closes it. As a suggester, Enter without a highlighted row submits the form as usual.
Picks and additions are announced ("Picked Lumen Optics").
The menu is on the navigation glass like Picker's; the field itself is a solid TextField control.