Svelte Faceted Search Drawers - Flowbite Svelte Blocks

Get started with a collection of drawer components using a faceted search interface to use multiple filters options to search for results in your application.

Default faceted search drawer #

Use this free example of a drawer component to show a list of checkbox, radio and input field elements to filter search results.

  • Svelte
<script>
  import { Drawer, Button, CloseButton, Label, Input, Textarea, Checkbox, A, Heading, Rating, Radio } from 'flowbite-svelte';
  import { sineIn } from 'svelte/easing';

  let hidden4 = true;
  let transitionParams = {
    x: -320,
    duration: 200,
    easing: sineIn
  };
  let myRating = '3';
</script>

<div class="text-center">
  <Button on:click={() => (hidden4 = false)}>Show drawer</Button>
</div>
<Drawer transitionType="fly" {transitionParams} bind:hidden={hidden4} id="sidebar4">
  <div class="flex items-center">
    <Heading tag="h5" id="drawer-label" class="inline-flex items-center mb-6 text-base font-semibold text-gray-500 uppercase dark:text-gray-400">APPLY FILTERS</Heading>
    <CloseButton on:click={() => (hidden4 = true)} class="mb-4 dark:text-white" />
  </div>
  <form action="#">
    <div class="space-y-6">
      <!-- Categories -->
      <div class="space-y-2">
        <Heading tag="h6" class="text-base font-medium text-black dark:text-white">Categories</Heading>
        <div class="flex items-center">
          <Checkbox>TV, Audio-Video</Checkbox>
        </div>
        <div class="flex items-center">
          <Checkbox checked>Desktop PC</Checkbox>
        </div>
        <div class="flex items-center">
          <Checkbox>Gaming</Checkbox>
        </div>
        <div class="flex items-center">
          <Checkbox>Monitors</Checkbox>
        </div>
        <div class="flex items-center">
          <Checkbox>Laptops</Checkbox>
        </div>
        <div class="flex items-center">
          <Checkbox checked>Console</Checkbox>
        </div>
        <div class="flex items-center">
          <Checkbox>Tablets</Checkbox>
        </div>
        <div class="flex items-center">
          <Checkbox>Foto</Checkbox>
        </div>
        <div class="flex items-center">
          <Checkbox>Fashion</Checkbox>
        </div>
        <div class="flex items-center">
          <Checkbox>Books</Checkbox>
        </div>
        <A href="/">View all</A>
      </div>
      <!-- Prices -->
      <div class="space-y-2">
        <Heading tag="h6" class="text-base font-medium text-black dark:text-white">Prices</Heading>
        <div class="flex items-center justify-between col-span-2 space-x-3">
          <div class="w-full">
            <Label for="last_name" class="mb-2">From</Label>
            <Input type="text" id="last_name" placeholder="300" required />
          </div>
          <div class="w-full">
            <Label for="company" class="mb-2">To</Label>
            <Input type="text" id="company" placeholder="3500" required />
          </div>
        </div>
      </div>

      <!-- Rating -->
      <div class="space-y-2">
        <Heading tag="h6" class="text-base font-medium text-black dark:text-white">Rating</Heading>
        <div class="flex items-center">
          <Radio bind:group={myRating} value="5"><Rating total={5} rating={5} /></Radio>
        </div>
        <div class="flex items-center">
          <Radio bind:group={myRating} value="4"><Rating total={5} rating={4} /></Radio>
        </div>
        <div class="flex items-center">
          <Radio bind:group={myRating} value="3"><Rating total={5} rating={3} /></Radio>
        </div>
        <div class="flex items-center">
          <Radio bind:group={myRating} value="2"><Rating total={5} rating={2} /></Radio>
        </div>
        <div class="flex items-center">
          <Radio bind:group={myRating} value="1"><Rating total={5} rating={1} /></Radio>
        </div>
      </div>
    </div>
  </form>
</Drawer>
Dashboard Footers Faceted Search Modals