Search Bar
MD3 search — the bar and the view it opens into.
Walkthrough
1. Basic
Suggestions arrive as data. filter={false} when they come back already filtered — from a server, or from your own ranking.
<script lang="ts"> import { SearchBar } from 'omaris'; let query = $state(''); const RECENT = [ { value: 'inv-4021', label: 'Invoice 4021', supporting: 'Kurdistan Roasters', group: 'Recent' }, { value: 'inv-4022', label: 'Invoice 4022', supporting: 'Dijla Grocers', group: 'Recent' }, { value: 'erbil', label: 'Erbil warehouse', supporting: '2 open orders', group: 'Places' } ];</script><div class="w-full max-w-md"> <SearchBar bind:value={query} suggestions={RECENT} placeholder="Search orders and places" /></div>2. Views
auto docks a panel under the bar on a wide screen and goes full screen below the breakpoint. Force either when you know which one you want.
<script lang="ts"> import { SearchBar } from 'omaris'; const SUGGESTIONS = [ { value: 'a', label: 'Baghdad' }, { value: 'b', label: 'Basra' }, { value: 'c', label: 'Erbil' } ];</script><div class="flex w-full max-w-md flex-col gap-4"> <SearchBar view="docked" placeholder="Docked" suggestions={SUGGESTIONS} /> <SearchBar view="fullscreen" placeholder="Full screen" suggestions={SUGGESTIONS} /></div>3. Variants and loading
loading swaps the trailing control for a spinner while results are in flight — for suggestions that come back from a server.
<script lang="ts"> import { SearchBar } from 'omaris';</script><div class="flex w-full max-w-md flex-col gap-4"> <SearchBar variant="filled" placeholder="filled" /> <SearchBar variant="outlined" placeholder="outlined" size="sm" /> <SearchBar variant="elevated" placeholder="elevated" loading /></div>