airport-one-embeddable-widgets v2.15.1
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. 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 |
experimentId | string | null | The experiment identifier |
clickId | string | null | The click identifier |
arrivalAirportLabel | string | null | The label for the arrival airport input |
departureAirportLabel | string | null | The label for the departure airport input |
departureDateLabel | string | null | The label for the departure date input |
returnDateLabel | string | null | The label for the return date input |
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>
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;
}
14 days ago
15 days ago
20 days ago
21 days ago
22 days ago
22 days ago
27 days ago
2 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
9 months ago
9 months ago
8 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
6 months ago
7 months ago
7 months ago
9 months ago
9 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
6 months ago
10 months ago
6 months ago
6 months ago
6 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago