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.
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>
<flight-search-form></flight-search-form>
You can customize the behavior and appearance of the element by setting its attributes. The available attributes are listed in the table below:
| Attribute | Type | Default | Description |
|---|---|---|---|
| origin | string | null | The origin airport code |
| destination | string | null | The destination airport code |
| airlines | string | null | A comma-separated list of airline codes |
| providers | string | null | A comma-separated list of provider codes |
| destinations | string | null | A comma-separated list of destination codes |
| primaryColor | string | null | The primary color of the form |
| secondaryColor | string | null | The secondary color of the form |
| locationId | string | null | The location identifier - Use only capital letter and numbers 1-10 Chracters max. NOTE: widget will not load if this is incorrect! |
| theme | string | null | Options: light | dark If the widget is placed on a white background select light, if on a black background select dark |
<flight-search-form origin="ORD"></flight-search-form>
The main container wrapping the entire flight search widget. Target this to style the overall appearance.
The form inside the widget that contains the search inputs and buttons. Customize this to modify the form layout and styling.
Holds the autocomplete functionality for the departure and arrival airports. Style this container to enhance the autocomplete feature.
Wraps each autocomplete input. Target this to customize the wrapper around the autocomplete input fields.
The icon associated with the autocomplete input field. Style this to change the icon's appearance.
The input field for the autocomplete feature. Modify its appearance and behavior as needed.
The switch button that allows users to swap departure and arrival airports. Style this to improve visual appeal and click-feedback.
The SVG graphic within the switch button. Customize this for the desired visual effect.
Holds the date range inputs for selecting departure and return dates. Customize this for layout and styling of the date inputs.
The icon within the date range inputs. Style this to change the appearance of the date selection icons.
The input field for selecting the departure date. Modify its appearance and behavior as needed.
The vertical line separator between the departure and return date inputs. Style this to create a distinct separator effect.
The input field for selecting the return date. Modify its appearance and behavior as needed.
The container that holds the search button. Customize this to adjust the button's position within the widget.
The search button that submits the flight search. Style this for visual appeal and interactive feedback.
The SVG graphic within the search button. Customize this for the desired visual effect.
/* 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;
}
For example, to set the destination to your airport you can use the following markup, changing ORD with your airports IATA code:
<flight-search-form destination="ORD" ></flight-search-form>