# Seat map · MIAN

Pick seats for a cinema, theatre, bus or venue: rows, an aisle, taken and accessible seats, and a legend.

- Id: `seat-map` · Category: Forms · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/seat-map
- Use for: seat selection, cinema seats, theatre booking, bus seats, venue map.

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-seatmap`: The wrapper: screen, seats, legend.
- `mn-seatmap-screen`: The stage or screen edge.
- `mn-seats`: A <fieldset> of rows.
- `mn-seat-row`: A row: a label and seats.
- `mn-seat`: A <label> around a checkbox. mn-seat-accessible marks wheelchair spaces; disabled = taken.
- `mn-seat-aisle`: An aisle gap.
- `mn-seatmap-legend`: The key.

## Accessibility

- Every seat is a real checkbox with a full name (“Row C, seat 5”), so it can be reached and announced.
- Taken seats are disabled, not hidden. The legend repeats the meaning of each style in words.
- For large venues, also offer “best available” so people do not have to pick seat by seat.

## Examples

### Seats

```html
<div class="mn-seatmap">
  <div class="mn-seatmap-screen">Screen</div>
  <fieldset class="mn-seats"><legend class="mn-sr-only">Choose seats</legend>
    <div class="mn-seat-row"><span aria-hidden="true">A</span><label class="mn-seat"><input type="checkbox" name="seat" value="A1" aria-label="Row A, seat 1"></label><label class="mn-seat"><input type="checkbox" name="seat" value="A2" aria-label="Row A, seat 2" disabled></label><label class="mn-seat"><input type="checkbox" name="seat" value="A3" aria-label="Row A, seat 3" disabled></label><label class="mn-seat"><input type="checkbox" name="seat" value="A4" aria-label="Row A, seat 4"></label><span class="mn-seat-aisle"></span><label class="mn-seat"><input type="checkbox" name="seat" value="A5" aria-label="Row A, seat 5"></label><label class="mn-seat"><input type="checkbox" name="seat" value="A6" aria-label="Row A, seat 6"></label><label class="mn-seat"><input type="checkbox" name="seat" value="A7" aria-label="Row A, seat 7"></label><label class="mn-seat"><input type="checkbox" name="seat" value="A8" aria-label="Row A, seat 8"></label></div>
    <div class="mn-seat-row"><span aria-hidden="true">B</span><label class="mn-seat"><input type="checkbox" name="seat" value="B1" aria-label="Row B, seat 1"></label><label class="mn-seat"><input type="checkbox" name="seat" value="B2" aria-label="Row B, seat 2"></label><label class="mn-seat"><input type="checkbox" name="seat" value="B3" aria-label="Row B, seat 3"></label><label class="mn-seat"><input type="checkbox" name="seat" value="B4" aria-label="Row B, seat 4" checked></label><span class="mn-seat-aisle"></span><label class="mn-seat"><input type="checkbox" name="seat" value="B5" aria-label="Row B, seat 5" checked></label><label class="mn-seat"><input type="checkbox" name="seat" value="B6" aria-label="Row B, seat 6" disabled></label><label class="mn-seat"><input type="checkbox" name="seat" value="B7" aria-label="Row B, seat 7"></label><label class="mn-seat"><input type="checkbox" name="seat" value="B8" aria-label="Row B, seat 8"></label></div>
    <div class="mn-seat-row"><span aria-hidden="true">C</span><label class="mn-seat mn-seat-accessible"><input type="checkbox" name="seat" value="C1" aria-label="Row C, seat 1, wheelchair space"></label><label class="mn-seat"><input type="checkbox" name="seat" value="C2" aria-label="Row C, seat 2"></label><label class="mn-seat"><input type="checkbox" name="seat" value="C3" aria-label="Row C, seat 3"></label><label class="mn-seat"><input type="checkbox" name="seat" value="C4" aria-label="Row C, seat 4"></label><span class="mn-seat-aisle"></span><label class="mn-seat"><input type="checkbox" name="seat" value="C5" aria-label="Row C, seat 5"></label><label class="mn-seat"><input type="checkbox" name="seat" value="C6" aria-label="Row C, seat 6"></label><label class="mn-seat"><input type="checkbox" name="seat" value="C7" aria-label="Row C, seat 7"></label><label class="mn-seat mn-seat-accessible"><input type="checkbox" name="seat" value="C8" aria-label="Row C, seat 8, wheelchair space"></label></div>
    <div class="mn-seat-row"><span aria-hidden="true">D</span><label class="mn-seat"><input type="checkbox" name="seat" value="D1" aria-label="Row D, seat 1" disabled></label><label class="mn-seat"><input type="checkbox" name="seat" value="D2" aria-label="Row D, seat 2" disabled></label><label class="mn-seat"><input type="checkbox" name="seat" value="D3" aria-label="Row D, seat 3"></label><label class="mn-seat"><input type="checkbox" name="seat" value="D4" aria-label="Row D, seat 4"></label><span class="mn-seat-aisle"></span><label class="mn-seat"><input type="checkbox" name="seat" value="D5" aria-label="Row D, seat 5"></label><label class="mn-seat"><input type="checkbox" name="seat" value="D6" aria-label="Row D, seat 6"></label><label class="mn-seat"><input type="checkbox" name="seat" value="D7" aria-label="Row D, seat 7" disabled></label><label class="mn-seat"><input type="checkbox" name="seat" value="D8" aria-label="Row D, seat 8" disabled></label></div>
  </fieldset>
  <div class="mn-seatmap-legend"><span><span class="mn-seat"></span>Free</span><span><span class="mn-seat" style="background:var(--mn-primary);border-color:var(--mn-primary)"></span>Yours</span><span><span class="mn-seat mn-seat-taken"></span>Taken</span><span><span class="mn-seat mn-seat-accessible"></span>Wheelchair space</span></div>
</div>
```

## Source

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