Combobox

Búsqueda con lista filtrada. El input muestra el label; value / onValueChange usan el value de la opción. Para un select nativo sin buscar, usa Select (Formulario).

Preview principal

COMBOBOXvalue="MX" · México

paísfreeSolosin resultadosdefaultValue

muestra label · emite value · ↑↓ Enter Escape · Select = nativo · Combobox = buscar

Patrones

Controlado, freeSolo, vacío y defaultValue.

CASOS

controlado

El padre guarda el value de la opción.

texto libre

freeSolo admite valores fuera de la lista.

sin resultados

Query sin coincidencias → mensaje vacío (i18n).

no controlado

Estado interno con defaultValue.

Uso

import { useState } from "react";
import { Combobox } from "devsoftec-ui";

function Ejemplo() {
  const [country, setCountry] = useState("MX");

  return (
    <Combobox
      placeholder="Buscar país…"
      options={[
        { value: "MX", label: "México" },
        { value: "ES", label: "España" },
      ]}
      value={country}
      onValueChange={setCountry}
    />
  );
}

Al elegir «México», el campo muestra México y onValueChange recibe "MX".

Props

Prop	Tipo	Default	Descripción
options	{ value, label }[]	—	Sugerencias
value / defaultValue	string	—	option.value (o texto si freeSolo)
onValueChange	(value: string) => void	—	Cambio
freeSolo	boolean	false	Texto libre
placeholder	string	i18n	Placeholder
filter	(option, query) => boolean	incluye	Filtro
emptyText	string	i18n	Sin resultados

i18n

Clave	Uso
combobox.placeholder	Placeholder
clear	aria-label del ×
emptyState.noResults	Lista vacía

Comportamiento

• role="combobox" · listbox · option + aria-selected
• ↑ / ↓ · Enter · Escape
• Click fuera cierra y limpia el draft de edición