StarRating

Cambia las propiedades y valora: la nota que elijas se mantiene.

Sin readOnly, las estrellas se pueden pulsar y adelantan el valor al pasar el ratón. Es un radiogroup de la APG: una sola parada de Tab y las flechas suben o bajan la nota. label nombra el grupo y se ve encima; sin él, cada estrella solo dice «3 de 5».

Escribe al lado qué significa el número elegido: cinco estrellas no dicen lo mismo a todos los huéspedes, y la palabra se lee también sin ver el color. En React, escucha onChange y lee value del elemento: ya no recibe la nota como en el kit 0.1.

readOnly la deja como dato, y ahora pinta fracciones: un 4,6 llena el 60 % de la quinta estrella. Ya no son cinco botones deshabilitados: es una imagen con su nota como nombre («4,6 de 5»), así que no hace falta envolverla en un role="img". La cifra exacta va al lado, en mono y con tabular-nums para comparar filas (la Regla de los Tres Papeles), y oculta al lector de pantalla para que no la oiga dos veces.

size es el lado de cada estrella en píxeles. 14 a 16 en filas de tabla y listas, 20 a 24 en formularios, 32 cuando valorar es lo único que hay en la pantalla.

Una valoración por aspecto, cada una con su label. Es un control de formulario nativo: con name envía la nota y con required no vale 0. En lugar de deshabilitar el envío hasta que estén todas, el formulario marca las que faltan y lo dice debajo de cada una. Pulsa «Enviar valoración» sin valorar para verlo.

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).