Select
Lista nativa de opciones, con grupos. Para pocas opciones conocidas; si hay que buscar, Combobox.
Usar
import { Select } from "@unozero-ai/ui/react";
<Select></Select>Básico
Es el <select> nativo con la anatomía de Input: en el móvil abre el selector del sistema, que es lo más cómodo con el pulgar. Las opciones van en options ({ value, label }). Si no hay un valor razonable por defecto, pon placeholder: sin value, ahora el placeholder se ve de verdad y, con required, el campo no valida hasta que se elige algo. Ya no hace falta el defaultValue="" del kit de React. Sin placeholder, como el nativo, queda elegida la primera opción.
Opciones como hijos y agrupadas
Las opciones también llegan como hijos <option> y <optgroup>, igual que en un <select>: es la forma natural en HTML, y el kit las vuelve a copiar si cambian. Con options, agrupa con group en cada opción; las que comparten grupo deben ir seguidas en el array, porque cada tramo sale como un <optgroup> aparte. Las dos formas se pueden mezclar: primero van los hijos y luego options.
Error y deshabilitado
El mensaje de error va debajo y dice qué falta, no solo el borde (la Regla del Tenant). Deshabilitado es para un valor que se ve pero se decide en otro sitio, como la moneda de la cuenta; no se envía con el formulario.
Cotización
Un caso real: dos selects controlados con value y onChange que recalculan el total. onChange llega en cuanto se elige una opción y e.currentTarget.value ya trae el valor nuevo. Las opciones pueden llevar más campos que value y label (aquí, el precio); el Select ignora el resto. Con name, el valor entra en el FormData del formulario.
En React, usa onChange: onInput en el envoltorio todavía no funciona, porque choca con un método interno del kit.
Total: $ 1.770.000
Select o Combobox
Usa Select cuando las opciones son pocas y el usuario ya las conoce: régimen, tipo de habitación, tipo de documento. Con hasta unas diez se recorren de un vistazo, y el selector nativo del móvil no tiene rival.
Usa Combobox cuando hay que buscar: países, hoteles de una cadena, monedas. También cuando cada opción necesita una descripción o un icono, que el <option> nativo no puede pintar.
API
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).