Forms

SearchField

Search input with a leading icon, automatic clear button, and optional keyboard shortcut hint badge.

import { SearchField } from '@lostgradient/cinder/search-field';
formsearch
01

Overview

Dedicated text input with a clear button and search icon for filtering or querying.

Usage

svelte 
<script lang="ts">
  import SearchField from '@lostgradient/cinder/search-field';
</script>

<SearchField />
Live preview
02

When to use

Use when
  • Capturing a free-text query that filters or queries a larger dataset.
  • Surfacing a global search affordance with a visible keyboard shortcut.
Avoid when
  • Selecting from a constrained list of known options — use combobox instead.
03

Examples

Clearable search field

Search input with an initial value so the clear button is visible.

04

Props

Props for search-field
Name Type Default Required Bindable Description
id text Stable id for the input element. Required when composing with FormField.
value text '' bind Bindable search value.
placeholder text Placeholder text.
shortcut text Optional keyboard shortcut hint (e.g. '⌘K'). Rendered as a trailing <kbd aria-hidden="true"> badge. The shortcut itself is not wired by this component.
disabled boolean Disables the input and the clear button.
readonly boolean Marks the input as read-only; the clear button becomes inert.
oninput (value: string) => void Fires on every keystroke with the current value.
onsearch (value: string) => void Fires when the native search event triggers (Enter or programmatic dispatch).
onClear () => void Fires when the clear button is clicked.
onkeydown unknown req