Bookable Slot Grid

A CSS-only, form-aware grid of selectable time slots. Pick a slot and submit — no JavaScript anywhere on this page. Try tabbing into the group and using the arrow keys.

Dimmed dashed slots are taken; the amber slot (Thu 30, 09:30) is pending / on hold. Both are non-selectable; everything else is available.

Choose a time
Mon 27
Tue 28
Wed 29
Thu 30
Fri 31
Taken slots are dimmed and cannot be selected.

Markup

<fieldset class="casca-slot-grid" style="--casca-slot-cols: 5">
  <legend class="casca-slot-grid-title">Choose a time</legend>
  <div class="casca-slot-col">
    <span class="casca-slot-colhead">Mon 27</span>
    <label class="casca-slot">
      <input class="casca-slot-input" type="radio" name="slot" value="mon-0900">
      <span class="casca-slot-time">09:00</span>
    </label>
    <!-- taken slot: <label class="casca-slot" data-state="taken"> + disabled input -->
  </div>
  <!-- ...one .casca-slot-col per day... -->
</fieldset>