ComboboxSelect

ComboboxSelect is a field at the control height (44px on a phone, 32px on a desktop) that people type into to find one or a few values in a long list, on a phone as on a desktop. It is for filtering, searching a server and creating values; a field people only pick from is a Select. It takes an array of options, flat or grouped, and builds the field, the list, the chips and the empty and loading lines from it. It is exported from @botiverse/raft-ui/wip, and its API can change in any release.

跟随页面浅色深色并排

When to use

The full choice between pickers is in Choosing a component.

Variants

跟随页面浅色深色并排

跟随页面浅色深色并排

跟随页面浅色深色并排

States

• Loading: loading shows a loading line in the list. Keep the list open while a choice is being saved, and show it with loading.
• Not loaded yet: fallbackOption gives a label to a chosen value whose option hasn't arrived, so the field stays readable.
• Invalid: status="error" or aria-invalid gives the field a danger-strong border.
• No match: the list says so in one line. Don't leave an empty popup.

Behavior

• Filter the options as people type, unless remote is set.
• With multiple, keep the list open when a value is chosen; clicking outside or Esc closes it. Typing continues after the last chip.
• An option is as tall as its content: one line is 36px, and a second line adds only its own height, with the same space above and below the text (Forms).
• A long option wraps to two lines, then truncates; a long chip truncates at the width of the field. Each has its whole text as its title while it is cut off (Forms).
• A chip, the clear button and the toggle sit 6px inside the field's outer edge and 6px apart: 20px on a desktop and 32px on a phone, so the field keeps its height with chips in it. They wear radius-chip, like every control embedded in a frame; a chip's remove button wears radius-sticker 2px inside the chip, with its focus ring drawn inside it (Shape).
• With maxTagCount, chips beyond the count collapse into a count while the field is not focused. All of them come back on focus.
• The list grows to 16rem (256px), its 4px padding above and below included: six 36px rows and part of a seventh, which shows there are more. Then it scrolls. listMaxHeight (a CSS length, or pixels, measured the same way) moves that cap, and listMaxHeight="16rem" is the same as leaving it out. Raise it where the field has a tall space of its own below it, such as a tall bottom Drawer; lower it when the list would cover something people need to see while they choose.

On a phone

A phone here is a touch screen narrower than the desktop layout, (width < 48rem) and (pointer: coarse). ComboboxSelect is the same text field there as on a desktop, because typing is what it is for: a tap focuses it and brings up the keyboard, typing filters the list, and create and remote work in the field. There is no bottom sheet. When people only pick a value and never need to type, use a Select instead: it opens without the keyboard.

• The list always opens below the field, between the field and the keyboard, as a native autocomplete does, and never flips. Which side has more room depends on whether the keyboard happens to be up, so a list that chose the roomier side opened downward one time and upward the next on the same field. When fewer than three rows fit below, the field scrolls up to the top of what is visible instead. As the keyboard comes up or goes, the address bar moves, or the filtered list shrinks and grows, only the list's height changes: the field stays where it is.
• The input stays at 16px or more at every size, so iOS doesn't zoom into it.
• size="lg" is a 52px field with 40px chips and buttons, 6px inside it; size="sm" is a 28px field with 22px chips and buttons, 3px inside it, as close as a segmented control's items sit to their track.
• Inside a bottom Drawer, give the drawer a height that doesn't follow the keyboard (lvh, not dvh) and room below the field for the list, and raise listMaxHeight when the drawer is tall.

跟随页面浅色深色并排

跟随页面浅色深色并排

This is for finding a value in a list. Combobox, the free-text field for mentions and tags, will get its own phone pattern: the input pinned at the top of a sheet or a full screen, with the suggestions between it and the keyboard.

Content

• Write the placeholder as what to do: Choose a model.
• Write the empty line as what found nothing: No models match "zz".

Accessibility

ComboboxSelect wraps Base UI Combobox: a text input with role="combobox" that controls a listbox.

• Name the field with a FieldLabel (Field) whose htmlFor matches its id, or with aria-label.
• Left Arrow at the start of the input moves focus to the chips, and Backspace or Delete removes the focused chip. Each remove button is named after its value (Remove Bugen).
• On a phone the field is the same text input, named the same way.
• Translate these announcements with messages when the interface is not in English.