Components
SearchField
A native search form with an input, clear control, and submit action.
Props
Native attributes and event handlers are forwarded to the root Form component. Common transitions apply to that root.
Theme entries: searchField,searchFieldClear,searchFieldInput,searchFieldSubmit.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Custom content; see the usage notes for its component-specific role. |
class | string | '' | Tailwind utilities merged after the component theme and variants. |
disabled | boolean | false | See usage notes and the component API. |
element | HTMLFormElement | null | $bindable(null) | Bindable reference to the composition root. |
inTransition | TransitionProps | undefined | Enter transition override. |
isVisible | boolean | $bindable(true) | Bindable visibility state. |
label | string | 'Search' | See usage notes and the component API. |
name | string | 'q' | See usage notes and the component API. |
onSearch | (value: string) => void | undefined | See usage notes and the component API. |
onsubmit | HTMLFormAttributes['onsubmit'] | undefined | See usage notes and the component API. |
outTransition | TransitionProps | undefined | Exit transition override. |
placeholder | string | 'Search...' | See usage notes and the component API. |
theme | Theme | globalTheme | Local Theme instance; defaults to the global theme. |
transition | TransitionProps | [noopTransition, {}] | Shared transition function and options. |
value | string | $bindable('') | See usage notes and the component API. |
variants | string[] | [] | Ordered component theme variants or cross-component references. |
Default usage
Import SearchField from sveltewind/components. This example shows its default styling in a usable context.
Loading...onSearch receives the current query and prevents native submission. Without it, normal form submission is preserved. Native action and method attributes are forwarded to Form.
Examples
Theme variants
Every variant available for SearchField in the built-in themes is shown below.
compact — Apply the compact variant.
Loading...stacked — Apply the stacked variant.
Loading...comfortable — Apply the comfortable variant.
Loading...Class overrides
Apply rounded-none border-primary-500 shadow-none locally.
Loading...Props and behavior
Change disabled while retaining the default component styling.
Loading...Content and values
Provide different label, placeholder values.
Loading...