# Time slots · MIAN

A grid of bookable times, available, nearly full or taken, built on radio buttons.

- Id: `time-slots` · Category: Forms · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/time-slots
- Use for: appointment times, book a time, available slots, booking module, reservation time.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

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

## Examples

### Time slots

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/time-slots/source