Appointment time slot picker
A grid of times to book an appointment, with taken slots greyed out and struck through.
Settings
Code
<fieldset class="uv-rts"><legend>Tuesday, October 14</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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Radio buttons
See all Radio buttonsWhere to use it
Clinics, hairdressers, gyms and consultants all need people to pick a time, and a grid of slots is faster than any dropdown. Free slots are outlined, taken ones are disabled radios shown greyed and struck through, and the chosen time fills with color and gains a small tick so the selection is clear even in grayscale.
The heading is editable for the date. Since each slot is a native radio with the disabled attribute where needed, browsers skip unavailable times when using the keyboard, and the value submits like any other form field.