HTML + CSSRadio buttons
Franjas horarias
Una rejilla de horas para reservar cita, con los huecos ocupados en gris y tachados.
Ajustes
16px
1x
Código
<fieldset class="uv-rts"><legend>Martes 14 de octubre</legend><div class="gr"><label><input type="radio" name="uv-rts"><span>09:00</span></label><label><input type="radio" name="uv-rts" disabled><span>09:30</span></label><label><input type="radio" name="uv-rts"><span>10:00</span></label><label><input type="radio" name="uv-rts" checked><span>10:30</span></label><label><input type="radio" name="uv-rts"><span>11:00</span></label><label><input type="radio" name="uv-rts"><span>11:30</span></label><label><input type="radio" name="uv-rts" disabled><span>12:00</span></label><label><input type="radio" name="uv-rts"><span>16:00</span></label><label><input type="radio" name="uv-rts"><span>16:30</span></label></div></fieldset>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Radio buttons
Ver todos: Radio buttonsDónde usarlo
Clínicas, peluquerías, gimnasios y consultores necesitan que la gente elija una hora, y una rejilla de franjas es más rápida que cualquier desplegable. Las horas libres llevan contorno, las ocupadas son radios desactivados en gris y tachados, y la elegida se llena de color con un pequeño check para que se entienda incluso en escala de grises.
El título se edita para poner la fecha. Como cada franja es un radio nativo con disabled donde toca, el navegador se salta las horas ocupadas con el teclado y el valor se envía como cualquier campo.