Combobox.

<div class="ui-sample ui-form ui-combobox" data-combobox-runtime="v1"><label for="combobox-0">Dataset</label><div><input class="input" id="combobox-0" role="combobox" aria-expanded="false" aria-controls="combobox-0-options" aria-autocomplete="list" value=""><button class="btn btn--secondary" type="button" data-combobox-toggle="true" aria-controls="combobox-0" aria-label="Mostrar datasets">Mostrar</button></div><section class="ui-combobox__panel" data-combobox-panel="true" hidden="" aria-label="Opciones de Dataset"><header><strong>Dataset</strong><button class="btn btn--secondary" type="button" data-combobox-close="true" aria-label="Cerrar opciones de Dataset">Cerrar</button></header><ul id="combobox-0-options" role="listbox" hidden="" aria-label="Dataset"><li id="combobox-0-option-0" role="option" tabindex="-1" aria-selected="true">Empleo regional</li><li id="combobox-0-option-1" role="option" tabindex="-1">Empleo nacional</li><li id="combobox-0-option-2" role="option" tabindex="-1">Ingresos del trabajo</li></ul></section><small>Escribe el valor o abre la lista.</small></div>

<div class="ui-sample ui-form ui-combobox border border-slate-300 bg-white p-4 text-slate-950" data-combobox-runtime="v1"><label for="combobox-0">Dataset</label><div><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="combobox-0" role="combobox" aria-expanded="false" aria-controls="combobox-0-options" aria-autocomplete="list" value=""><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" data-combobox-toggle="true" aria-controls="combobox-0" aria-label="Mostrar datasets">Mostrar</button></div><section class="ui-combobox__panel grid gap-3" data-combobox-panel="true" hidden="" aria-label="Opciones de Dataset"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Dataset</strong><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" data-combobox-close="true" aria-label="Cerrar opciones de Dataset">Cerrar</button></header><ul class="grid gap-2" id="combobox-0-options" role="listbox" hidden="" aria-label="Dataset"><li id="combobox-0-option-0" role="option" tabindex="-1" aria-selected="true">Empleo regional</li><li id="combobox-0-option-1" role="option" tabindex="-1">Empleo nacional</li><li id="combobox-0-option-2" role="option" tabindex="-1">Ingresos del trabajo</li></ul></section><small class="text-sm text-slate-600">Escribe el valor o abre la lista.</small></div>

import type { ChangeEventHandler, MouseEventHandler } from "react";

export interface ComboboxOption {
  /** Texto visible de la opción. */
  label: string;
  /** Opción activa de la lista (`aria-selected`). */
  selected?: boolean;
}

export interface ComboboxProps {
  /** Etiqueta visible del campo. */
  label?: string;
  /** Id del campo; la lista usa `${id}-options`. Usa uno distinto por campo en la página. */
  id?: string;
  name?: string;
  /** Texto inicial de un campo no controlado. */
  defaultValue?: string;
  /** Texto de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Muestra la lista de opciones (`aria-expanded` en el campo). */
  open?: boolean;
  options?: ComboboxOption[];
  /** Se llama al elegir una opción de la lista. */
  onSelect?: (option: ComboboxOption, index: number) => void;
  /** Texto visible del botón que abre la lista. */
  triggerLabel?: string;
  /** Nombre accesible del botón que abre la lista (`aria-label`), distinto de su texto visible. */
  triggerAriaLabel?: string;
  /** Se llama al pulsar el botón que abre o cierra la lista; quien lo usa invierte `open`. */
  onToggle?: MouseEventHandler<HTMLButtonElement>;
  /** Cierra las opciones en modo controlado; si falta, el botón usa onToggle. */
  onClose?: MouseEventHandler<HTMLButtonElement>;
  /** Texto de ayuda bajo el campo. */
  help?: string;
  className?: string;
}

/**
 * Campo de texto con lista de sugerencias, para elegir un valor de una lista larga escribiendo parte de él.
 *
 * El filtrado lo hace quien lo usa: pasa `value`, `open` y las `options` que coinciden. Sin JavaScript queda como un campo de texto.
 *
 * @example <Combobox id="dataset" label="Dataset" value={texto} onChange={filtrar} open={abierto} options={coincidencias} onSelect={elegir} onToggle={alternar} />
 */
export function Combobox({
  label = "Dataset",
  id = "combobox-0",
  name,
  defaultValue = "",
  value,
  onChange,
  open = false,
  options = [{ label: "Empleo regional", selected: true }, { label: "Empleo nacional" }, { label: "Ingresos del trabajo" }],
  onSelect,
  triggerLabel = "Mostrar",
  triggerAriaLabel = "Mostrar datasets",
  onToggle,
  onClose,
  help = "Escribe el valor o abre la lista.",
  className,
}: ComboboxProps) {
  const listaId = options.length ? `${id}-options` : undefined;
  const controlado = value !== undefined && onChange !== undefined;
  const native = !onToggle && !onClose && !onSelect && !onChange;
  return (
    <div className={["ui-form ui-combobox", className].filter(Boolean).join(" ")} data-combobox-runtime={native ? 'v1' : undefined}>
      <label htmlFor={id}>{label}</label>
      <div>
        <input
          className="input"
          id={id}
          name={name}
          role="combobox"
          aria-expanded={open && listaId ? "true" : "false"}
          aria-controls={listaId}
          aria-autocomplete="list"
          onChange={onChange}
          {...(controlado ? { value } : { defaultValue: value ?? defaultValue })}
        />
        <button className="btn btn--secondary" type="button" data-combobox-toggle aria-controls={id} aria-label={triggerAriaLabel} onClick={onToggle}>
          {triggerLabel}
        </button>
      </div>
      {listaId ? (
        <section className="ui-combobox__panel" data-combobox-panel hidden={!open} aria-label={`Opciones de ${label}`}>
        <header><strong>{label}</strong><button className="btn btn--secondary" type="button" data-combobox-close aria-label={`Cerrar opciones de ${label}`} onClick={onClose??onToggle}>Cerrar</button></header>
        <ul id={listaId} role="listbox" hidden={!open} aria-label={label}>
          {options.map((opcion, i) => (
            <li
              key={`${i}-${opcion.label}`}
              id={`${id}-option-${i}`}
              role="option"
              tabIndex={-1}
              aria-selected={opcion.selected ? "true" : undefined}
              onClick={onSelect ? () => onSelect(opcion, i) : undefined}
            >
              {opcion.label}
            </li>
          ))}
        </ul>
        </section>
      ) : null}
      {help ? <small>{help}</small> : null}
    </div>
  );
}