Search field ported

A recognizable search entry point with clear affordances.

A recognizable search entry point with clear affordances.

Live specimen

Loading demo…

Guidance

When to use

Filtering a visible list or table in place.
Toolbar search where the query should be clearable with one click.

When not to use

Use expanding-search for compact header search with results.
Use combobox when the search sets a form value.
Use filter-toolbar when search sits with other filters and sort.

Installation

pnpm dlx shadcn-svelte@latest add @arcui/search-field

Usage

<script lang="ts">
  import { SearchField } from '$lib/components/search-field';

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

<SearchField
  label="Search members"
  placeholder="Name or email"
  bind:value={query}
/>

Variants & Examples

Default

Standard appearance and configuration.

<SearchField
      label="Search members"
      placeholder="Name or email"
      value={query}
      onValueChange={setQuery}
    />

API Reference

Prop	Type	Default	Description
`label`	`string`	–	(Required) Visible label tied to the input.
`value`	`string`	–	(Required) Current query.
`onValueChange`	`(value: string) => void`	–	(Required) Called on every keystroke and with an empty string when cleared.
`...props`	`Omit<InputHTMLAttributes<HTMLInputElement>, "type">`	–	Forwarded to the input, including ref, placeholder, and name.

Keyboard Interactions

Key	Action
`Escape`	Clears the field (native type=\"search\" behavior in most browsers).

Accessibility

Native input type="search" with a real label.
Clear button is labelled "Clear search" and returns focus to the input.
The search icon is aria-hidden.

Motion

- The clear button scales in from 0.8 with a slight blur on a snappy spring and presses to 0.96. - Reduced motion fades it in and out without scale or blur; the reserved slot keeps the field width fixed either way.

Notes for AI

Use to filter a visible list in place. Use expanding-search for a compact header search with results, and combobox to choose a value.
Always controlled: pass value and onValueChange, and debounce expensive filtering yourself.

Source of truth: registry/components/search-field/search-field.tsx