Checkbox

Con label, pulsar el texto también marca; description pone una línea de apoyo debajo (o el slot description, si lleva marcado). checked fija el estado inicial y la casilla guarda el suyo, como un <input type="checkbox">: ya no hace falta onCheckedChange. Un permiso por casilla: no juntes la política de datos y las ofertas en la misma. Si marcar algo tiene efecto inmediato, sin botón de guardar, usa Switch.

Para elegir varias opciones de una lista corta. Agrúpalas en un <fieldset> con su <legend>: el lector de pantalla anuncia el título del grupo al entrar en la primera casilla. Es un control de formulario nativo: con name, cada casilla marcada envía su value (por defecto "on"), y las que comparten name llegan como lista con FormData.getAll. Un <fieldset disabled> las apaga todas. Pulsa «Guardar servicios».

En React, onChange llega al marcar o desmarcar y e.target.checked trae el estado nuevo. Si pasas checked en un componente que se vuelve a pintar, contrólalo con estado: el envoltorio aplica la prop en cada render y la casilla volvería a ese valor.

Con required, el formulario no se envía mientras la casilla esté sin marcar: el borde pasa a error, la casilla se sacude y el mensaje del navegador aparece debajo con su icono. Se va al marcarla. Si el mensaje tiene que ser tuyo, pásalo en error. Pulsa «Confirmar reserva» sin marcar.

Para opciones que se ven pero no se deciden aquí. Di el porqué en la propia etiqueta; una casilla gris sin explicación parece un error.

Sin label la casilla va sola, así que necesita aria-label con lo que selecciona: «Seleccionar la reserva RES-48213 de Laura Gómez», no «Seleccionar»; el kit lo pasa a la casilla interna. Va en el slot leading de la fila. La de «Seleccionar todas» usa indeterminate cuando solo hay algunas marcadas: pinta una raya y se va al pulsarla, como en el nativo. La acción en lote dice a cuántos afecta.

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