Skip to main content

ToolbarSearch

ToolbarSearch

Standard search field for Toolbar and FilterToolbar strips

Tags: component toolbar form

View Demo

ToolbarSearch is the search input for a list strip: full width on phones, sm:w-64 beside the filters, type="search", and an accessible name, since strips have no visible labels. The placeholder defaults to the label followed by "…".

Import​

<script>
  import { ToolbarSearch } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  import { FilterToolbar, ToolbarSearch } from '@classic-homes/theme-svelte';

  let query = $state('');
</script>

<FilterToolbar label="Home tools" filterCount={0} filters={() => {}}>
  {#snippet search()}
    <ToolbarSearch label="Search homes" placeholder="Address, lot, plan…" bind:value={query} />
  {/snippet}
</FilterToolbar>

Props​

Prop Type Default Description
label string required Accessible name, e.g. "Search homes"
value string '' Search text (bindable)
placeholder string `${label}…` Placeholder; end it with "…"
id string - Input id
class string - Extra classes (merged over w-full sm:w-64)

Other props pass through to Input (e.g. onValueChange).

On this page