Todos los componentes (204)

Combobox

Campos · Combobox

Qué es y cuándo usarlo

Campo con lista de sugerencias que también admite texto libre: se escribe, la lista se filtra y se puede elegir una opción o dejar lo escrito tal cual. Es SearchField con allowsCustomValue encendido por defecto.

Cuándo usarlo

Una ciudad, una categoría, un cliente: hay sugerencias, pero lo que no esté también vale.
allowsCustomValue={false} lo convierte en una elección cerrada.

Cuándo no

Varias a la vez: MultiSelect (de una lista) o TagsInput (sin lista).

Teclado y accesibilidad: los de SearchField (patrón combobox de ARIA).

Cómo se ve

Ciudad de entrega

Si no está en la lista, escríbela

Escribe «ma» y la lista se filtra.

Solo las de la lista

Lo que escribas y no esté en la lista se descarta al salir

<Combobox label="Ciudad de entrega" options={ciudades} hint="Si no está en la lista, escríbela" inputValue={texto} onInputChange={setTexto} />
<Combobox
  label="Solo las de la lista"
  options={ciudades}
  allowsCustomValue={false}
  hint="Lo que escribas y no esté en la lista se descarta al salir"
/>

Props

Se importa con import { Combobox } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	—
`options`obligatoria	`readonly ListOption[]`	—
`allowsCustomValue`	`boolean`	Con `false` solo vale una opcion de la lista: lo escrito que no coincida se descarta al salir. Por defecto, `true`.
`autoFocus`	`boolean`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultInputValue`	`string`	—
`defaultSelectedKey`	`string \| null`	La clave elegida al empezar, sin controlarla desde fuera.
`disabled`	`boolean`	—
`error`	`string`	—
`hiddenLabel`	`boolean`	La etiqueta solo para el lector de pantalla. Para cuando el campo va dentro de algo que ya se explica solo (una celda de tabla, un grupo de filtros), nunca para ahorrar espacio.
`hint`	`string`	—
`inputValue`	`string`	El texto escrito, controlado desde fuera.
`invalid`	`boolean`	—
`loading`	`boolean`	Las opciones estan llegando. Marca el campo como ocupado, enseña un anillo y una fila `loadingText` en la lista; las opciones que ya hubiera se quedan.
`loadingText`	`string`	Lo que dice la fila de carga. Por defecto, «Cargando…».
`menuTrigger`	`"input" \| "focus" \| "manual"`	Que abre la lista: `input` (por defecto) al escribir, `focus` en cuanto el campo recibe el foco, y `manual` solo con el boton o con las flechas.
`name`	`string`	Para que la clave elegida viaje en un formulario nativo.
`noResultsMessage`	`string`	Texto cuando lo que se escribe no encuentra nada.
`offset`	`number`	Separacion en pixeles entre el campo y la lista. Por defecto, ninguna.
`onBlur`	`() => void`	Al salir del campo. Lo usa el formulario para marcar que se ha tocado.
`onInputChange`	`(text: string) => void`	—
`onOpenChange`	`(open: boolean) => void`	Al abrirse o cerrarse la lista.
`onSelectionChange`	`(key: string \| null) => void`	—
`placeholder`	`string`	—
`placement`	`Placement`	Donde sale la lista. Por defecto, pegada justo debajo del campo.
`readOnly`	`boolean`	—
`renderOption`	`OptionRender<ListOption>`	Pinta el interior de cada opcion de la lista: un avatar, dos lineas, un precio. El nombre que lee el lector de pantalla sigue siendo `label`.
`required`	`boolean`	—
`selectedKey`	`string \| null`	La clave elegida, controlada desde fuera.
`serverFiltered`	`boolean`	La lista ya viene filtrada de fuera (busqueda en el servidor). Por defecto filtra el propio componente con lo que se escribe.
`size`	`"sm" \| "md" \| "lg"`	—
`validationBehavior`	`"aria" \| "native"`	—
`variant`	`FieldVariant`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: