Skip to content
Fieldbook
Menu
Sign in
EN

Inputs

Combobox field

Combobox field: A searchable dropdown field: typing filters a list of options live, and picking one fills the field.

Using Combobox field

Combobox field uses the card preview frame with a light/dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

ControlTypeDefaultPreview limits
placeholdertextSearch frameworks...Up to 40 characters
accentcolor#38BDF8No additional limit in the metadata.
openOnLoadbooleanfalseNo additional limit in the metadata.
Which frameworks are available for Combobox field?

Combobox field is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Combobox field depend on?

The React metadata lists these npm dependencies beyond React: motion, clsx, tailwind-merge.

What accessibility details are visible in Combobox field?

The React source for Combobox field includes: native elements (button, input); attributes and handlers (aria-activedescendant, aria-autocomplete, aria-controls, aria-expanded, aria-haspopup, aria-hidden, aria-label, aria-selected, onKeyDown, tabIndex); explicit roles (combobox, listbox, option); key comparisons (ArrowDown, ArrowUp, Enter, Escape). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Combobox field handle reduced motion?

Combobox field reads the motion preference in its React source through useReducedMotion(). Preference-dependent expressions in index.tsx: reduceMotion ? false : { opacity: 0, y: -6, scale: 0.98 }; reduceMotion ? undefined : { opacity: 0, y: -6, scale: 0.98 }. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Filtered suggestion field component, a Fieldbook UI component in Inputs.
2768Filtered suggestion fieldInputsA text field that filters a list of suggestions as you type and shows the matches in a dropdown below, with keyboard navigation and a clear button.
Still of the Birthdate popover picker component, a Fieldbook UI component in Inputs.
2305Birthdate popover pickerInputsA labeled button that opens a floating calendar with month and year dropdowns for quickly reaching a birth year, closing itself the moment a day is picked.
Still of the Grouped select menu component, a Fieldbook UI component in Inputs.
2796Grouped select menuInputsA dropdown select whose options are grouped under section headings, with edge arrow strips that auto-scroll long lists.
Still of the Model picker prompt box component, a Fieldbook UI component in Inputs.
2772Model picker prompt boxInputsCompose a prompt, select a model, and attach a local file with explicit callbacks and status feedback.
Still of the Range span slider component, a Fieldbook UI component in Inputs.
2800Range span sliderInputsA slider with two thumbs on one track, letting someone pick a low and high value together as a filled span.
Still of the Addon Input Group component, a Fieldbook UI component in Inputs.
2297Addon Input GroupInputsA text field wrapped in one bordered shell that can carry a leading icon, a trailing button or text, and shares one focus ring across the whole group.