Size
Palette
Rounded
Naked
Clearable
Disabled
Value: (empty)


Svelte
<script lang="ts">
    let search: string = $state("");
</script>

<SearchField bind:value={search} placeholder="Search…" />


package_2

import type { SearchFieldSize, SearchFieldPalette } from '@abhc/spektral-ui';
PropTypeDefault
valuestring""
placeholderstring"Search..."
clearablebooleantrue
disabledbooleanfalse
autofocusbooleanfalse
nakedbooleanfalse
size"sm" | "md" | "lg""md"
roundedbooleanfalse
palette"tone" | "accent" | "accentbg""tone"
Prop value
Type string
Default ""
Prop placeholder
Type string
Default "Search..."
Prop clearable
Type boolean
Default true
Prop disabled
Type boolean
Default false
Prop autofocus
Type boolean
Default false
Prop naked
Type boolean
Default false
Prop size
Type "sm" | "md" | "lg"
Default "md"
Prop rounded
Type boolean
Default false
Prop palette
Type "tone" | "accent" | "accentbg"
Default "tone"