Seat map
Pick seats for a cinema, theatre, bus or venue: rows, an aisle, taken and accessible seats, and a legend.
Seats
Screen
FreeYoursTakenWheelchair space
<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>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/seat-map.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-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.