Elige tu asiento
Asiento13CPasillo
HTML + CSSRadio buttons

Aircraft seat map picker

A cabin section with a centre aisle: choose a free seat and the boarding pass shows its number and type.

Settings

16px
1x

Code

<fieldset class="uvq04-seat"><legend>Choose your seat</legend><div class="bp"><span>Seat</span><b>13C</b><em>Aisle</em></div><div class="cb"><div class="gr"><i aria-hidden="true">A</i><i aria-hidden="true">B</i><i aria-hidden="true">C</i><i aria-hidden="true"></i><i aria-hidden="true">D</i><i aria-hidden="true">E</i><i aria-hidden="true">F</i><label><input type="radio" name="uvq04-seat" value="12A" aria-label="12A" disabled><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="12B" aria-label="12B" disabled><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="12C" aria-label="12C"><span class="st"></span></label><i class="rn" aria-hidden="true">12</i><label><input type="radio" name="uvq04-seat" value="12D" aria-label="12D"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="12E" aria-label="12E"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="12F" aria-label="12F"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="13A" aria-label="13A"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="13B" aria-label="13B"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="13C" aria-label="13C" checked><span class="st"></span></label><i class="rn" aria-hidden="true">13</i><label><input type="radio" name="uvq04-seat" value="13D" aria-label="13D"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="13E" aria-label="13E" disabled><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="13F" aria-label="13F" disabled><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="14A" aria-label="14A" disabled><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="14B" aria-label="14B"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="14C" aria-label="14C"><span class="st"></span></label><i class="rn" aria-hidden="true">14</i><label><input type="radio" name="uvq04-seat" value="14D" aria-label="14D"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="14E" aria-label="14E"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="14F" aria-label="14F"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="15A" aria-label="15A"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="15B" aria-label="15B"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="15C" aria-label="15C" disabled><span class="st"></span></label><i class="rn" aria-hidden="true">15</i><label><input type="radio" name="uvq04-seat" value="15D" aria-label="15D" disabled><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="15E" aria-label="15E"><span class="st"></span></label><label><input type="radio" name="uvq04-seat" value="15F" aria-label="15F"><span class="st"></span></label></div></div><p class="lg" aria-hidden="true"><i></i>Free<i class="x"></i>Taken<i class="me"></i>Your seat</p></fieldset>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Radio buttons

See all Radio buttons

Where to use it

This radio group lays out four rows of a narrow body cabin with a rounded nose, an aisle with row numbers and seat letters on top. Free seats are tinted, taken ones are crossed out and disabled, and the chosen seat lifts in solid colour. A short script updates the boarding pass strip with the seat number and whether it is window, middle or aisle.

The main color is the airline colour for free and chosen seats. List taken seats as disabled inputs, add rows by repeating the pattern, and keep the legend below so it stays clear which seats can still be booked.