UI: Components

Cinema

A cinema seat selection interface. Built with a fieldset element containing an ol element with a series of li elements. Each li element contains a series of label elements with an input element of type checkbox and an aria-label attribute to display the seat number.

To hide a seat, remove value. For reserved/sold seats, add disabled (red).
For unselectable/unavailable seats, add inert (dark gray).

Chose your seats

With opposite color-scheme

Chose your seats

With right-to-left

Chose your seats