# Flight Board

> An avionics-styled departures directory that live-filters flights by code, city, or airline into a columnar listbox with mono code, time, and gate readouts, status filter chips, match highlighting, skeleton loading, and full keyboard navigation — token-driven and design-system agnostic.

- Category: Filter
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Runway
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: search, typeahead
- Page: https://builder.atheros.ai/components/flight-board
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_flight_board/preview-0376a5081178.webp

## Features

- Persistent departures board that narrows live as you type — no dropdown, the listbox is the component
- WAI-ARIA combobox/listbox pattern with `aria-expanded`, `aria-controls`, `aria-autocomplete`, and `aria-activedescendant`
- Debounced live filtering over flight code, city, airline, and destination code, case-insensitive
- Status filter chips (All / On time / Boarding / Delayed) with `aria-pressed`, combined with the text query
- Columnar instrument layout with an uppercase letter-spaced column rail and mono flight-code, sked, and gate readouts
- Matched-substring highlighting as an underlined accent `<mark>` built with safe DOM nodes
- Status chips with a leading dot — boarding pulses in the accent, cancelled strikes through its sked time
- Live shown-count readout (`07 / 14 shown`) in the board header
- Skeleton shimmer rows while the async data source resolves
- Empty state with a Tabler icon when no departure matches
- Full keyboard support: ArrowUp/ArrowDown with wrap, Home/End, Enter, Escape
- Polite live region announcing result counts and selection

## Accessibility

- **Combobox** — `role="combobox"` with `aria-expanded`, `aria-controls`, `aria-autocomplete`
- **Active row** — `aria-activedescendant` references the active option id
- **Listbox** — `role="listbox"` with `role="option"` items and `aria-selected`
- **Status chips** — `aria-pressed` toggles within a labeled `role="group"`
- **Keyboard nav** — Arrow keys with wrap, Home/End, Enter, Escape
- **Focus indicators** — `:focus-visible` with `--ring` outline on all elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Live regions** — `aria-live="polite"` announcing result counts and selection

## Keyboard shortcuts

- `ArrowDown` — Move to next row (wraps)
- `ArrowUp` — Move to previous row (wraps)
- `Home` — Move to first row
- `End` — Move to last row
- `Enter` — Select the active row
- `Escape` — Clear the filter

## Common questions

**Which frameworks is Flight Board available in?**

Flight Board ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Flight Board filter component free?**

Yes. Flight Board is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Flight Board support dark mode?**

Yes. Flight Board ships light and dark themes, both drawn from the Runway design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Flight Board live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/flight-board

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt