Actions and forms

Combobox

Filterable autocomplete with listbox keyboard navigation.

Live example

Framework

Type to filter, then use arrow keys and Enter.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Combobox } from "@cofob/design-system-react";

/**
 * Complete Combobox parameter reference.
 * @param value/defaultValue
 *   type: string or string[]; controlled or initial value
 *   default: —
 *   example: "overview"
 * @param inputValue/defaultInputValue
 *   type: string; controlled or initial visible query
 *   default: —
 *   example: {inputValueOrdefaultInputValue}
 * @param label
 *   type: string | renderable content
 *   required
 *   example: "Accessible label"
 * @param options
 *   type: readonly ComboboxOption[]
 *   required
 *   example: {{ cols: 100, fit: "width" }}
 * @param name
 *   type: string
 *   default: —
 *   example: "Ada Lovelace"
 * @param hint
 *   type: adapter-specific
 *   default: —
 *   example: {hint}
 * @param disabled
 *   type: boolean
 *   default: false
 *   example: {disabled}
 * @param required
 *   type: boolean
 *   default: false
 *   example: true
 * @param noResultsLabel
 *   type: string
 *   default: "No results found"
 *   example: "Accessible label"
 * @param onValueChange
 *   type: (value: string, option: ComboboxOption) => void
 *   default: —
 *   example: {handleValueChange}
 * @param onInputValueChange
 *   type: (query: string) => void
 *   default: —
 *   example: {handleInputValueChange}
 * @param root/input attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function ComboboxExample() {
  return (
    <Combobox label="Framework" options={frameworks} />
  );
}

Svelte

<script lang="ts">
  import { Combobox } from "@cofob/design-system-svelte";

  // Complete Combobox parameter reference.
  // value/defaultValue
  //   type: string or string[]; controlled or initial value
  //   default: —
  //   example: "overview"
  // inputValue/defaultInputValue
  //   type: string; controlled or initial visible query
  //   default: —
  //   example: {inputValueOrdefaultInputValue}
  // label
  //   type: string | renderable content
  //   required
  //   example: "Accessible label"
  // options
  //   type: readonly ComboboxOption[]
  //   required
  //   example: {{ cols: 100, fit: "width" }}
  // name
  //   type: string
  //   default: —
  //   example: "Ada Lovelace"
  // placeholder
  //   type: string
  //   default: —
  //   example: "Choose an option"
  // hint
  //   type: adapter-specific
  //   default: —
  //   example: {hint}
  // disabled
  //   type: boolean
  //   default: false
  //   example: {disabled}
  // required
  //   type: boolean
  //   default: false
  //   example: true
  // noResultsLabel
  //   type: string
  //   default: "No results found"
  //   example: "Accessible label"
  // onValueChange
  //   type: (value: string, option: ComboboxOption) => void
  //   default: —
  //   example: {handleValueChange}
  // onInputValueChange
  //   type: (query: string) => void
  //   default: —
  //   example: {handleInputValueChange}
  // root/input attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Combobox label="Framework" options={frameworks} bind:value />

HTML

<!--
  Complete Combobox parameter reference.
  value/defaultValue
    type: string or string[]; controlled or initial value
    default: —
    example: "overview"
  inputValue/defaultInputValue
    type: string; controlled or initial visible query
    default: —
    example: {inputValueOrdefaultInputValue}
  label
    type: string | renderable content
    required
    example: "Accessible label"
  options
    type: readonly ComboboxOption[]
    required
    example: {{ cols: 100, fit: "width" }}
  name
    type: string
    default: —
    example: "Ada Lovelace"
  placeholder
    type: string
    default: —
    example: "Choose an option"
  hint
    type: adapter-specific
    default: —
    example: {hint}
  disabled
    type: boolean
    default: false
    example: {disabled}
  required
    type: boolean
    default: false
    example: true
  noResultsLabel
    type: string
    default: "No results found"
    example: "Accessible label"
  onValueChange
    type: (value: string, option: ComboboxOption) => void
    default: —
    example: {handleValueChange}
  onInputValueChange
    type: (query: string) => void
    default: —
    example: {handleInputValueChange}
  root/input attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<div class="cf-combobox" data-cf-combobox><input role="combobox" data-cf-combobox-input><div role="listbox" data-cf-combobox-listbox>…</div></div>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-combobox`
Adapters	Native · React · Svelte
Primary props	value/defaultValue · inputValue/defaultInputValue · label · options · name · placeholder · hint · disabled · required · noResultsLabel · onValueChange · onInputValueChange · root/input attributes
Documented states	closed · open · filtered · selected · empty · disabled
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`value/defaultValue`	`string or string[]; controlled or initial value`	`—`	React · Svelte · HTML	`"overview"`	Use the first form for controlled state and the second for initial state.
`inputValue/defaultInputValue`	`string; controlled or initial visible query`	`—`	React · Svelte · HTML	`{inputValueOrdefaultInputValue}`	Controls or initializes the visible autocomplete query independently of its value.
`label`required	`string \| renderable content`	`required`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`options`required	`readonly ComboboxOption[]`	`required`	React · Svelte · HTML	`{{ cols: 100, fit: "width" }}`	Component-specific choices or configuration options.
`name`	`string`	`—`	React · Svelte · HTML	`"Ada Lovelace"`	Identifies a native form field or named entity, depending on the component.
`placeholder`	`string`	`—`	Svelte · HTML	`"Choose an option"`	Svelte placeholder option shown before a selection.
`hint`	`adapter-specific`	`—`	React · Svelte · HTML	`{hint}`	Configures hint.
`disabled`	`boolean`	`false`	React · Svelte · HTML	`{disabled}`	Prevents user interaction while preserving visible context.
`required`	`boolean`	`false`	React · Svelte · HTML	`true`	Marks the label and control as required.
`noResultsLabel`	`string`	`"No results found"`	React · Svelte · HTML	`"Accessible label"`	Message shown when filtering produces no options.
`onValueChange`	`(value: string, option: ComboboxOption) => void`	`—`	React · Svelte · HTML	`{handleValueChange}`	Reports a user-driven tab or accordion value change.
`onInputValueChange`	`(query: string) => void`	`—`	React · Svelte · HTML	`{handleInputValueChange}`	Reports edits to the visible autocomplete query.
`root/input attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.