Ir al contenido
uiify

Framework

Next.jsTanStack StartAstroVike

Estilo

CSSTailwind

Tema

Idioma

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)

Combobox

Cuadro combinado ARIA con filtrado y uno o varios valores.

Navegadores
Chrome 114+Firefox 125+Safari 17+
Nivel
2
Tamaño comprimido
5.18 kB
Presupuesto de diseño forzado
0 ms
Presupuesto de axe
0
Compatible con SSR
Sí
Contrato publicado
Entorno de pruebas

Zona de pruebas

Combobox

Predeterminado

Manzana
Banana
Cereza
Dátil

Múltiple

ReactUI
React
UI
TypeScript
Accesibilidad
Sistemas de diseño

Abierto

Manzana
Banana
Cereza
Dátil

Grande

API

Combobox.Root

PropTipoPredeterminadoDescripción
childrenReactNode—Partes de Combobox: control, etiquetas, input, activador y contenido.
items*ComboboxItemData[]—Lista completa de opciones que filtra el input.
defaultInputValuestring—Texto inicial del input cuando su valor es no controlado.
defaultOpenboolean—Indica si la lista comienza abierta cuando el estado de apertura es no controlado.
defaultValuestring | readonly string[]—Valor o valores seleccionados en el primer renderizado cuando la selección es no controlada.
multiplebooleanfalsePermite seleccionar y quitar varios valores como etiquetas.
allowCustomValuebooleanfalsePermite convertir texto escrito que no está en items en un valor seleccionado.
addOnPastebooleantrueAñade varios valores delimitados a partir de texto pegado en modo múltiple.
delimitersreadonly string[][","]Caracteres que confirman o separan los valores escritos en modo múltiple.
maxValuesnumber—Número máximo de valores que se pueden seleccionar en modo múltiple.
validateValue(value: string) => boolean—Rechaza un valor personalizado cuando devuelve false.
filterFn(items: ComboboxItemData[], inputValue: string) => ComboboxItemData[]—Reemplaza el filtro integrado que reduce los elementos a medida que el usuario escribe.
inputValuestring—Texto del input; hace que el valor escrito sea controlado.
onInputValueChange(value: string) => void—Se llama con el nuevo texto cada vez que cambia el input.
onOpenChange(open: boolean, details: OpenChangeDetails) => void—Se llama al abrir o cerrar la lista, con el motivo del cambio.
onValueChange((value: string) => void) | ((value: string[]) => void)—Se llama con el valor seleccionado o con el arreglo completo de valores seleccionados.
openboolean—Indica si la lista está abierta; hace que el estado de apertura sea controlado.
valuestring | readonly string[]—Valor o valores seleccionados; hace que la selección sea controlada.

Combobox.Control

PropTipoPredeterminadoDescripción
childrenReactNode—Etiquetas e input renderizados dentro del control visual compartido.
classNamestring—Clase aplicada al elemento de control.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Combobox.Tags

PropTipoPredeterminadoDescripción
childrenReactNode—Contenido añadido después de las etiquetas generadas que se pueden quitar.
classNamestring—Clase aplicada al contenedor de etiquetas generadas.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Combobox.Input

PropTipoPredeterminadoDescripción
classNamestring—Clase aplicada al input de texto.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Combobox.Trigger

PropTipoPredeterminadoDescripción
childrenReactNode—Contenido del botón que abre la lista, como un ícono.
classNamestring—Clase aplicada al botón activador.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Combobox.Content

PropTipoPredeterminadoDescripción
align"start" | "center" | "end"—Alineación de la lista respecto al input sobre el lado elegido.
children*(filteredItems: ComboboxItemData[]) => ReactNode—Función de renderizado que se llama con los elementos que quedan tras filtrar.
classNamestring—Clase aplicada a la ventana emergente de la lista.
side"top" | "right" | "bottom" | "left"—Lado del input en el que se coloca la lista.

Combobox.Item

PropTipoPredeterminadoDescripción
classNamestring—Clase aplicada al elemento de opción.
item*ComboboxItemData—Elemento que renderiza esta opción, normalmente obtenido del callback de contenido.

Combobox.Empty

PropTipoPredeterminadoDescripción
childrenReactNode—Contenido que se muestra cuando el filtrado no deja elementos.
classNamestring—Clase aplicada al elemento de estado vacío.

ComboboxItemData

PropTipoPredeterminadoDescripción
disabledboolean—Impide seleccionar este elemento.
label*string—Texto que se muestra para el elemento y con el que compara el filtro.
value*string—Valor que se comunica al seleccionar el elemento.

Teclado

TeclaAcción
↓ / ↑Abrir y recorrer las opciones
EnterSeleccionar
EscapeCerrar
a–zEscribir para filtrar opciones

Accesibilidad

Combobox ARIA + listbox. La opción activa se anuncia mediante aria-activedescendant. Content expone el estado abierto/cerrado; las opciones exponen los estados resaltado, desactivado y, en modo múltiple, seleccionado. Usa Empty para explicar que ninguna opción coincide. La animación de presencia de Popup se desactiva si se prefiere el movimiento reducido.

Puntos de estilo

data-statedata-highlighteddata-disableddata-selected