SearchBar

The question to all your answers.

Example

Props

🕹️ standard props
input
HTMLElement
The input element
value
string
The current value of the input
placeholder
string
The placeholder text for the input
class
{ container?: string, icon?: string, input?: string }
Optional custom class names for the container, icon, and input elements
🎨 style props
--search-bar-ring-color
color
The ring color of the search bar
rgb(var(--global-color-contrast-100))
--search-bar-background-color
color
The background color of the search bar
rgb(var(--global-color-background-100))
--search-bar-border-radius
size
The border radius of the search bar
0.5rem
--search-bar-height
size
The height of the search bar
3rem
--search-bar-padding
size
The padding inside the search bar
0rem 1rem 0rem 1rem
--search-bar-line-height
size
The line height of the text inside the search bar
1.5rem
--search-bar-font-size
size
The font size of the text inside the search bar
.875rem
--search-bar-max-width
size
The maximum width of the search bar
--search-bar-width
size
The width of the search bar
100%

Slots

iconSnippet

The slot for rendering an icon inside the search bar

Default content:

<svg
  viewBox="0 0 20 20"
  fill="none"
  aria-hidden="true"
  class="search-icon {clazz.icon}"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"
  />
</svg>
    

inputSnippet

The slot for rendering custom content inside the input field

Default content:

<input
  aria-autocomplete="both"
  aria-labelledby="search-content"
  id="search-content"
  autocomplete="off"
  autocorrect="off"
  autocapitalize="off"
  enterkeyhint="search"
  spellcheck="false"
  placeholder={placeholder}
  maxlength="512"
  tabindex="0"
  bind:this={input}
  bind:value={value}
  {oninput}
  {onchange}
  {onkeydown}
  {onfocus}
  {onblur}
  class="input {clazz.input}"
/>
    

Events

oninput
Triggered when the input value changes
onchange
Triggered when the input value changes and the user commits the change
onkeydown
Triggered when a key is pressed down in the input
onfocus
Triggered when the input gains focus
onblur
Triggered when the input loses focus