Combobox

Úsalo cuando la lista es larga o cuando cada opción necesita una segunda línea para distinguirse: aquí la ciudad y el tamaño del hotel. Para cinco o seis opciones cortas y sin búsqueda, usa Select. El campo es a la vez el valor elegido y el buscador: escribir filtra por label, value, description y keywords, sin distinguir tildes ni mayúsculas.

Sigue el patrón combobox de la APG: el foco se queda en el campo, las flechas abren y recorren la lista, Inicio y Fin saltan a los extremos, Enter elige y Escape cierra sin cerrar el modal que lo contenga. La lista flota en la top layer, así que ningún overflow la corta.

Ahora tiene label propio: ya no hace falta envolverlo en un <label>. options es un array de opciones.

leading acepta texto corto, como un emoji, o un nodo del DOM (un <svg>), que el kit clona en el campo y en la lista. Ya no es un elemento de React como en el kit 0.1. Aquí la bandera es contenido y no adorno: ayuda a encontrar la moneda de un vistazo. La búsqueda ya ignora las tildes, así que «dolar» encuentra «Dólar» sin ayuda; usa keywords para lo que no se ve, como el país.

placeholder dice qué significa no haber elegido («Sin asignar», no «Selecciona…»), y emptyMessage explica la búsqueda sin resultados con las palabras del producto. Escribe un nombre que no esté para verlo.

En el kit 0.1, onChange recibía el valor; ahora recibe el evento: lee value del elemento (e.target.value). Si le pasas value, el envoltorio lo vuelve a escribir en cada render: contrólalo con estado, como aquí, o no lo pases y deja que el elemento lo guarde.

Lo que el kit 0.1 no tenía: error pinta el borde, escribe el mensaje debajo y deja el control inválido para el formulario; state="success" confirma un valor validado contra otro dato; deshabilitado, helperText explica dónde se cambia. size acepta los mismos tamaños que Input: sm, md y lg.

Es un control de formulario nativo: con name, el value de la opción entra en el FormData, y required frena el envío y lo dice debajo del campo, con el mensaje del navegador. form.reset() lo vacía, o lo devuelve a su atributo value si lo tenía. Pulsa «Crear reserva» sin elegir hotel.

Con align="end" la lista crece hacia la izquierda desde el borde derecho del campo. Úsalo en barras de herramientas y cabeceras de tarjeta, donde el selector vive pegado al margen derecho: aquí va en el slot header de Card. La lista mide 224 px o el ancho del campo, lo que sea mayor, y si no cabe abajo se abre arriba.

Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).