Pricing

SearchInput handbook

v1.3.1 · @snowui-design-system/components

License: Before reading component documentation, source, or npm usage instructions for the first time, read the full LICENSE. Reuse that review for the same task and version. Public API configuration and internal implementation changes have different license implications. All components use the unified runtime package; source rights remain governed by the license.

Overview

A single-line input with a search icon for filtering lists, searching pages, and entering queries in toolbars.

When to use it

Use it to enter a query directly, such as filtering a list. Use SearchBox for the entry to a global search popup. The host decides how the query filters data; prefer TableToolbar for a DataTable toolbar.

  • bind:value synchronizes input. The page decides how to filter application data.

  • Default as="search" integrates with Listbox or Popover search regions. Choose borderless within an existing surface to avoid a duplicate border or background.

Quick start

This example shows the recommended basic composition. See the sections below for more cases and composition limits.

<script lang="ts">	import { SearchInput, Icon } from '@snowui-design-system/components';</script> <SearchInput placeholder="Search" style="width: 20rem; max-width: 100%; height: var(--size-12); flex: none;" />

API

Keyword Type Default Description
type InputProps["type"] "search" Native input type; search is the default
value string | number — Current value; supports bind:value
element HTMLElement — Bindable root element reference for inspecting or focusing the instance; it is not the input value
defaultValue string | number — Initial value
showSearchIcon boolean true Whether to render the default search icon
collapseBelow number — When this component’s own width is at or below the px threshold, an empty, unfocused input collapses to only the search icon. Disabled when omitted.
variant "default" | "borderless" "default" Appearance variant. borderless removes this input’s own border, background, radius, padding, and focus ring. It fills available width in a flex or block host while keeping stable intrinsic width in a shrink-to-fit host, suitable within an existing toolbar or panel surface.
as InputProps["as"] "search" Role keyword, passed to the inner Input by default. Within <Popover> or <Listbox>, it moves SearchInput into the fixed header like <Input as="search">. May be overridden explicitly.
class string "" Class appended to the SearchInput root host, preserving component classes
children Snippet — External leading, trailing, or other Input child content

See the base component documentation for inherited capabilities not redeclared here. This table lists only named public Props declared by this component.

Usage boundaries and details

Host component specialization

  • The real Input is SearchInput’s visual and interactive host. Compatible Input Props are passed as flat Props; there is no parts.Input.

  • Props derive from ComponentProps<typeof Input>. SearchInput owns and explicitly forwards value, defaultValue, type, as, class, and children to the host.

  • Input still owns native input events, ARIA, disabled/readonly/invalid states, Frame capabilities, and base appearance. SearchInput adds only default search semantics, the default search icon, and specialized borderless styling.

  • There is no extra wrapper. The real Input remains the root host and emits each event once.

  • The error Text generated inside Input can still be configured with flat parts.Text.

SearchInput specializes Input for searching. Apart from default type="search" and a default leading Search icon, its color, hover/focus states, clear X, three-slot layout, and Frame capabilities match Input.

Feature overview

  • Uses the Components built-in icon named search by default. An application-level IconProvider or explicit leading content can replace it.

  • The built-in Search icon uses Black/20 at rest and Black/40 while input is active; this color rule belongs only to SearchInput.

  • Explicit leading content replaces the default icon.

  • collapseBelow shows only the search icon when this component becomes too narrow. Minimum width is actual horizontal padding plus the leading Icon’s intrinsic width. An empty, unfocused input collapses; focus or a value restores it.

  • Clear X, hover, focus, disabled, readonly, invalid, and default error shake behavior come from Input.

  • The inner Input connects root capabilities to Frame.

Core Props

Keyword Type Default Description
placeholder string — Placeholder text
Other compatible Props ComponentProps<typeof Input> Same as Input Passed as flat Props to the real Input host, including size, style, disabled, readonly, invalid, events, ARIA, Frame Props, and parts.Text.

Popup usage

SearchInput defaults to as="search". Within <Popover> or <Listbox>, the inner Input moves into the fixed popup header through LISTBOX_HEADER_PORTAL_KEY context, gaining compact styling, no outer focus ring, and separation from the scrollable results. SearchInput does not own Listbox filtering; use <Input as="search"> directly when Listbox filtering is required.

Usage examples

<SearchInput placeholder="Search" />
 <SearchInput collapseBelow={80} placeholder="Search" />
 <SearchInput variant="borderless" placeholder="Search" />
<SearchInput placeholder="Search">  <Icon as="leading"><SearchIcon2 /></Icon></SearchInput>

This section is protected. An AI must request user review before modifying it.

SearchInput style overrides

Read the full LICENSE first; reuse that review for the same task, version, and scope.

First use public component Props to match the desired appearance, preserving the existing look where possible. If changes are necessary, follow the style selection and override order: use your own class (including Tailwind already in the project) or an instance style. The names below are public overrides actually consumed by source; check their scope and do not modify private DOM. Choose the correct SnowUI token family. External apps need not install SnowUI website utilities.

Variable Purpose and default reference
--snowui-clear-icon-size-override Size (default var(--size-4) = 16px)
--snowui-input-background-override Background (see component source for the default)

Design guide · Tokens · Composition boundaries

SearchInput types and states

Required Props: no named required Props.

Two-way binding: bind:value, bind:element.

Inherited declaration: Omit<InputProps, ControlledInputKeys>. Consult the base component’s public documentation for inherited capabilities; fields excluded by Omit cannot be used as if inherited unchanged.

Shared Frame API · Back to API

The following type declarations are actually referenced by public Props and come from source. A Svelte Snippet denotes a content fragment; ComponentProps denotes the Props of the corresponding component.

InputProps

Source: components/src/components/SearchInput.svelte

type InputProps = ComponentProps<typeof Input>;

ControlledInputKeys

Source: components/src/components/SearchInput.svelte

type ControlledInputKeys =        | "value"        | "defaultValue"        | "type"        | "as"        | "class"        | "element"        | "children";