Preview

Travel search surface

Search forms that handle every travel mode from a single composition.

Trip Search Forms combine Combobox, DateRangePicker, DateTimeInput, SegmentedControl, Select, and NumberInput into ready-to-use booking search blocks.

5

search modes

6

form variants

8

input types

Mode	Key inputs	Policy integration
Flight	Origin/dest + dates + class	Fare cap + advance booking
Hotel	Location + dates + rooms	Nightly rate cap
Car rental	Pick-up/drop-off + datetime	Car class limit
Rail	Stations + date + class	Route preference

Best for: Corporate travel platforms, OTAs, and multi-modal booking engines.
Pairs with: Travel Result Cards, Itinerary Timeline, Policy Compliance.

Included patterns

• Location autocomplete via Combobox

• Date-time selection for car rentals

• Traveler count with NumberInput

• Cabin class via SegmentedControl

Variants

Flight search

Origin-destination pair with dates, travelers, and cabin class.

Hotel search

Location, date range, guests, and room count.

Car rental search

Pick-up/drop-off locations with date-time selection.

Rail search

Station pair with date and class preferences.

Multi-city builder

Dynamic leg builder for complex itineraries.

Unified tabbed search

Tabbed container switching between all travel modes.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { AppBar, Card, DescriptionList, Fieldset, Heading, PageHeader, PageLayout, Sidebar, Stack, Table, Text } from '@dryui/ui';
</script>
<PageLayout.Root fullHeight>
  <PageLayout.Header sticky>
    <AppBar.Root>
      <AppBar.Title>Travel search surface</AppBar.Title>
    </AppBar.Root>
  </PageLayout.Header>
  <PageLayout.Sidebar sticky>
    <Sidebar.Root style="height: 100%;">
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.Item active href="#">Search</Sidebar.Item>
            <Sidebar.Item href="#">Results</Sidebar.Item>
            <Sidebar.Item href="#">Booking</Sidebar.Item>
            <Sidebar.Item href="#">Itinerary</Sidebar.Item>
            <Sidebar.Item href="#">Settings</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Search forms that handle every travel mode from a single composition.</PageHeader.Title>
          <PageHeader.Description>Trip Search Forms combine Combobox, DateRangePicker, DateTimeInput, SegmentedControl, Select, and NumberInput into ready-to-use booking search blocks.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>5</Heading>
          <Text as="p">search modes</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>6</Heading>
          <Text as="p">form variants</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>8</Heading>
          <Text as="p">input types</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.Head>Mode</Table.Head>
              <Table.Head>Key inputs</Table.Head>
              <Table.Head>Policy integration</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.Cell>Flight</Table.Cell>
              <Table.Cell>Origin/dest + dates + class</Table.Cell>
              <Table.Cell>Fare cap + advance booking</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Hotel</Table.Cell>
              <Table.Cell>Location + dates + rooms</Table.Cell>
              <Table.Cell>Nightly rate cap</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Car rental</Table.Cell>
              <Table.Cell>Pick-up/drop-off + datetime</Table.Cell>
              <Table.Cell>Car class limit</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Rail</Table.Cell>
              <Table.Cell>Stations + date + class</Table.Cell>
              <Table.Cell>Route preference</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Root>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>Corporate travel platforms, OTAs, and multi-modal booking engines.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Pairs with</DescriptionList.Term>
        <DescriptionList.Description>Travel Result Cards, Itinerary Timeline, Policy Compliance.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Location autocomplete via Combobox</Text>
        <Text as="p">• Date-time selection for car rentals</Text>
        <Text as="p">• Traveler count with NumberInput</Text>
        <Text as="p">• Cabin class via SegmentedControl</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>