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, Checkbox, A, Heading, Rating, Radio } from 'flowbite-svelte';
let hidden = true;
let myRating = '3';
</script>
<div class="text-center">
<Button onclick={() => (hidden = false)}>Show drawer</Button>
</div>
<Drawer bind:hidden id="sidebar4">
<div class="flex items-center justify-between">
<Heading tag="h5" id="drawer-label" class="mb-6 inline-flex items-center text-base font-semibold text-gray-500 uppercase dark:text-gray-400">APPLY FILTERS</Heading>
<CloseButton onclick={() => (hidden = 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="col-span-2 flex items-center justify-between 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>