Time slots
A grid of bookable times, available, nearly full or taken, built on radio buttons.
Time slots
<fieldset class="mn-slots" style="max-width:34rem">
<legend>Friday 2 October</legend>
<label class="mn-slot"><input type="radio" name="slot" value="09:00">09:00</label>
<label class="mn-slot"><input type="radio" name="slot" value="09:30" disabled>09:30<small>Taken</small></label>
<label class="mn-slot"><input type="radio" name="slot" value="10:00" checked>10:00</label>
<label class="mn-slot mn-slot-few"><input type="radio" name="slot" value="10:30">10:30<small>2 left</small></label>
<label class="mn-slot"><input type="radio" name="slot" value="11:00">11:00</label>
<label class="mn-slot"><input type="radio" name="slot" value="13:30">13:30</label>
<label class="mn-slot"><input type="radio" name="slot" value="14:00" disabled>14:00<small>Taken</small></label>
<label class="mn-slot mn-slot-few"><input type="radio" name="slot" value="14:30">14:30<small>1 left</small></label>
<label class="mn-slot"><input type="radio" name="slot" value="15:00">15:00</label>
<label class="mn-slot"><input type="radio" name="slot" value="15:30">15:30</label>
</fieldset>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/time-slots.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-slots | A <fieldset> of slots with a <legend>; auto-filling columns. |
| mn-slot | One slot: a <label> around a radio and the time. A <small> line adds context. |
| mn-slot-few | Few places left: the note turns warning colour. |
| input:disabled | A taken slot, struck through and not selectable. |
Accessibility
- It is a native radio group: Tab reaches it, arrow keys move between times, and screen readers announce “3 of 12”.
- Say what “few left” means in the note (“2 left”), and keep taken times visible but disabled so the day’s shape is clear.