dowel
Search Field

Components

Search Field

A compact search control for repository lists, command surfaces, filters, and settings.

Repository search

The shortcut is a visual hint only. Applications own the global keyboard listener and focus the field through its forwarded ref.

tsx
import { Kbd, SearchField } from "@karnstack/dowel";

<SearchField
  aria-label="Search repositories"
  name="repository-search"
  placeholder="Search repositories"
  shortcut={<Kbd keys={["Meta", "K"]} />}
/>

Sizes and surfaces

Use the bare variant when a surrounding command panel or toolbar already owns the surface.

tsx
<SearchField aria-label="Compact search" size="sm" placeholder="Filter branches" />
<SearchField aria-label="Default search" placeholder="Filter branches" />
<SearchField aria-label="Bare search" variant="bare" placeholder="Search commands" />

Behavior

Typing reveals a clear action. Escape clears a non-empty field and preserves focus. Use value with onValueChangefor controlled filtering, or defaultValue for local state. A Field label is associated automatically.

Searches repositories you can access.

tsx
<Field.Root>
  <Field.Label>Find a repository</Field.Label>
  <SearchField name="repository" placeholder="Owner or repository" />
  <Field.Description>Searches repositories you can access.</Field.Description>
</Field.Root>