Flight Search Form Custom Element

The Flight Search Form Custom Element is a web component that you can use in your website to display a flight search form. You can use it as a standard HTML element, and you don't need to have a React application to use it.

Installation

To include the flight-search-form custom element in your project, add the following script tag to your HTML file:

<script src="https://unpkg.com/airport-one-embeddable-widgets@latest/dist/airport-one-embeddable-widgets.iife.js"></script>

Usage

To use the flight-search-form custom element, simply add the following HTML tag to your markup:

<flight-search-form></flight-search-form>

You can customize the behavior and appearance of the element by setting its attributes. Attributes on the custom element are lowercase and map to camelCase React props. Hyphenated attribute names (e.g., primary-color) are not supported—use the all-lowercase, non-hyphen form (e.g., primarycolor). The table below shows both forms:

| React prop | Custom element attribute | Type (attribute) | Default | Description | | ---------------------- | ------------------------ | --------------------------- | ------- | --------------------------------------------------------------------------- | | subscribingAirport | subscribingairport | string | (unset) | The subscribing airport code | | origin | origin | string | (unset) | The origin airport code | | destination | destination | string | (unset) | The destination airport code | | airlines | airlines | string | (unset) | A comma-separated list of airline codes | | providers | providers | string | (unset) | A comma-separated list of provider codes | | destinations | destinations | string | (unset) | A comma-separated list of destination codes | | primaryColor | primarycolor | string | (unset) | The primary color of the form | | secondaryColor | secondarycolor | string | (unset) | The secondary color of the form | | locationId | locationid | string | (unset) | The location identifier | | experimentId | experimentid | string | (unset) | The experiment identifier | | clickId | clickid | string | (unset) | The click identifier | | arrivalAirportLabel | arrivalairportlabel | string | (unset) | The label for the arrival airport input | | departureAirportLabel | departureairportlabel | string | (unset) | The label for the departure airport input | | departureDateLabel | departuredatelabel | string | (unset) | The label for the departure date input | | returnDateLabel | returndatelabel | string | (unset) | The label for the return date input | | consentAdvertising | consentadvertising | string ("true" or "false") | "true" | Dynamically turn off/on Advertising consent | | consentAnalytics | consentanalytics | string ("true" or "false") | "true" | Dynamically turn off/on Analytics consent | | hideCarButton | hidecarbutton | string ("true" or "false") | "false"| When "true", hides the Cars tab/button. Flights is unaffected (backward compatible). | | — | borderradius | string (CSS length) | 0.5rem | Override the widget border radius used by a1-rounded-lg (and related). Accepts values like 0, 8px, 0.5rem. Bare numbers are treated as px. Default is 0.5rem (8px). |

Note: Types in this table describe custom element attribute values. In React, hideCarButton, consentAdvertising, and consentAnalytics are boolean props; pass true/false directly.

When an attribute is unset, the widget uses its internal defaults.

Compatibility note: Earlier docs sometimes showed camelCase attributes in HTML (e.g., subscribingAirport). HTML attribute names are case-insensitive, so those forms continue to work. This guide standardizes on lowercase (e.g., subscribingairport) for clarity and consistency.

Why no hyphens? Our attribute-to-prop mapping expects non-hyphenated names that directly map to camelCase React props.

Boolean attributes (custom element): Always pass a value of "true" or "false"; do not rely on presence-only attributes. For example:

Recommended:

<flight-search-form hidecarbutton="true"></flight-search-form>

Not recommended:

<flight-search-form hidecarbutton></flight-search-form>

Parsing rules: Accepted values are the strings "true" or "false" (case-insensitive). Leading/trailing whitespace is ignored. Any other value falls back to the documented default for that attribute. In React, pass actual booleans (true/false).

Border radius override (borderradius)

The embeddable widget uses Tailwind utilities like a1-rounded-lg, which resolve to a CSS custom property: --radius. You can set the border radius for these elements without writing custom CSS by adding the borderradius attribute:

<!-- Square corners -->
<flight-search-form borderradius="0"></flight-search-form>

<!-- 4px corners -->
<flight-search-form borderradius="4px"></flight-search-form>

<!-- 10px corners using rems also works -->
<flight-search-form borderradius="0.625rem"></flight-search-form>

Notes:

• Default (when unset) is 0.5rem (8px), preserving current behavior.
• Bare numbers are interpreted as pixels (e.g., 8 → 8px). The literal 0 is supported.
• This controls the corners for elements styled with a1-rounded-lg (and related sizes that derive from --radius). Other sizes like a1-rounded-xl are unaffected.

Examples

For example, to set the origin and destination airports, you can use the following markup:

<flight-search-form origin="JFK" destination="LAX"></flight-search-form>

To hide the Cars tab/button while keeping Flights visible, set hidecarbutton to "true":

<flight-search-form origin="ATW" hidecarbutton="true"></flight-search-form>

Default behavior is unchanged for existing embeds: if you omit hidecarbutton or set it to "false", the Cars button remains visible. No action is required unless you want to hide Cars.

Using the React component directly

If you consume the React component instead of the custom element, pass the camelCase prop hideCarButton (boolean). The default is false.

apiDomain (string) is required and should point to the base API domain used by the widget.

import FlightSearchFormComponent from 'ui/components/flight-search-form';

export function Example() {
  return (
    <FlightSearchFormComponent
      apiDomain={process.env.NEXT_PUBLIC_API_DOMAIN!}
      origin="ATW"
      hideCarButton={true}
    />
  );
}

Styling

Flight Search Widget: Element Descriptions

1. flight-search-widget-container

The main container wrapping the entire flight search widget. Target this to style the overall appearance.

2. flight-search-widget-form

The form inside the widget that contains the search inputs and buttons. Customize this to modify the form layout and styling.

3. flight-search-widget-autocomplete-container

Holds the autocomplete functionality for the departure and arrival airports. Style this container to enhance the autocomplete feature.

4. flight-search-widget-autocomplete-wrapper

Wraps each autocomplete input. Target this to customize the wrapper around the autocomplete input fields.

5. flight-search-widget-autocomplete-icon

The icon associated with the autocomplete input field. Style this to change the icon's appearance.

6. flight-search-widget-autocomplete-input

The input field for the autocomplete feature. Modify its appearance and behavior as needed.

7. flight-search-widget-switch

The switch button that allows users to swap departure and arrival airports. Style this to improve visual appeal and click-feedback.

8. flight-search-widget-switch-svg

The SVG graphic within the switch button. Customize this for the desired visual effect.

9. flight-search-widget-date-range-container

Holds the date range inputs for selecting departure and return dates. Customize this for layout and styling of the date inputs.

10. flight-search-widget-date-range-icon

The icon within the date range inputs. Style this to change the appearance of the date selection icons.

11. flight-search-widget-date-range-start-date-input

The input field for selecting the departure date. Modify its appearance and behavior as needed.

12. flight-search-widget-date-range-vertical-line-separator

The vertical line separator between the departure and return date inputs. Style this to create a distinct separator effect.

13. flight-search-widget-date-range-end-date-input

The input field for selecting the return date. Modify its appearance and behavior as needed.

14. flight-search-widget-search-button-container

The container that holds the search button. Customize this to adjust the button's position within the widget.

15. flight-search-widget-search-button

The search button that submits the flight search. Style this for visual appeal and interactive feedback.

16. flight-search-widget-search-button-svg

The SVG graphic within the search button. Customize this for the desired visual effect.

Example usage

/* Targeting the main container */
flight-search-form::part(flight-search-widget-container) {
  background-color: #f9f9f9;
  border-radius: 5px;
}

/* Styling the form inside the widget */
flight-search-form::part(flight-search-widget-form) {
  padding: 20px;
}

/* Enhancing the autocomplete container */
flight-search-form::part(flight-search-widget-autocomplete-container) {
  background-color: #fff;
  border: 1px solid #ddd;
}

/* Customizing the autocomplete wrapper */
flight-search-form::part(flight-search-widget-autocomplete-wrapper) {
  padding: 10px;
}

/* Changing the autocomplete icon's appearance */
flight-search-form::part(flight-search-widget-autocomplete-icon) {
  fill: #888;
}

/* Modifying the appearance and behavior of the autocomplete input field */
flight-search-form::part(flight-search-widget-autocomplete-input) {
  border: none;
  outline: none;
}

/* Styling the switch button */
flight-search-form::part(flight-search-widget-switch) {
  background-color: #007bff;
  color: #fff;
}

/* Customizing the switch button SVG graphic */
flight-search-form::part(flight-search-widget-switch-svg) {
  fill: #fff;
}

/* Customizing the date range container */
flight-search-form::part(flight-search-widget-date-range-container) {
  display: flex;
  justify-content: space-between;
}

/* Changing the appearance of the date selection icons */
flight-search-form::part(flight-search-widget-date-range-icon) {
  fill: #888;
}

/* Modifying the appearance of the departure date input field */
flight-search-form::part(flight-search-widget-date-range-start-date-input) {
  border: none;
  outline: none;
}

/* Styling the vertical line separator */
flight-search-form::part(
    flight-search-widget-date-range-vertical-line-separator
  ) {
  border-left: 1px solid #ddd;
}

/* Modifying the appearance of the return date input field */
flight-search-form::part(flight-search-widget-date-range-end-date-input) {
  border: none;
  outline: none;
}

/* Customizing the search button container */
flight-search-form::part(flight-search-widget-search-button-container) {
  text-align: right;
}

/* Styling the search button */
flight-search-form::part(flight-search-widget-search-button) {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
}

/* Customizing the search button SVG graphic */
flight-search-form::part(flight-search-widget-search-button-svg) {
  fill: #fff;
}

Consent Management

How to dynamically manage user consent preferences and pass them into the widget

There are two consent categories that can optionally be turned off/on via DOM manipulation and modifying attributes on the widget.

<flight-search-form origin="JFK" destination="LAX"></flight-search-form>

...

// Call a similar function via your CMP integration to pass in the consent values for Analytics or Advertising
function changeConsent(consentAdvertising, consentAnalytics) {
  // Select the flightWidget element
  var flightWidget = document.getElementsByTagName('flight-search-form');

  // Set user's advertising consent from CMP
  flightWidget.setAttribute('consentAdvertising', consentAdvertising); // consentAdvertising param should be a string of "true" or "false"

  // Set user's analytics consent from CMP
  flightWidget.setAttribute('consentAnalytics', 'true') // consentAnalytics param should be a string of "true" or "false"
}