Flight Search

This pattern provides the ability to perform searches for flights, holidays, hotels, rental cars, redemptions and any other products that British Airways offers

Guidelines

You can add or remove fields as you need them, but take care to make the flight search still make sense. For example, don’t remove the “From” whilst keeping the “To”.

Make the button label relevant to the search, for example:

When searching for flights only; the button text should be "Find flights"
When searching for flights with Avios; the button text should be "Find flights with Avios "

To avoid having the user re-type pieces of information, the form inputs should be prefilled with cached data. Data sources could include a previous search, customer account preferences, etc

This will keep the form consistent when used across different products.

Accessibility

If using the radio buttons to change the state of the form, remember to include visually hidden text to let the user know that changing their selections will update the fields available in this form.

Anatomy

The "Flight Search" pattern consists of several form components as well as links and content to help users find the information they need

Radio Group: For switching between different search modes eg. Flights only & Flights and Car
Link: Use to link out to search modes / products that cannot be incorperated into this pattern
Input Typeahead: For “to” and “from” origin and destinations
Input Datepicker: For selecting outbound and return dates
Select: For cabin class and ticket types
Form Group Dropdown: For selecting passengers by age; Populate with Input Stepper
Content: Use with Link to signpost to other relevant pages
Button: For submitting the form; Use the primary variant
Grid: Use 16px gutters in between each input

Responsive considerations

On small devices (320px - 1024px), we should be using 1 column, with the exception of the date input.
If you need to use the form in a narrow column on desktop (over 1024px), you can use the mobile layout.