Search Input

An Input with a leading search icon and a trailing clear button that appears once there's a value.

Colors

Sizes

Controlled

Type to search, × to clear

Using Search Input

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { SearchInput } from "@wizeworks/silicaui-react";

Props

Prop	Type	Required	Description
color	SearchInputColor	no	Accent color; maps to input-<color> (border + focus ring).
size	SearchInputSize	no	Default md. Matches same-size Button/Input heights.
clearable	boolean	no	Show the trailing clear (×) button once there's a value. Default true.
onValueChange	(value: string) => void	no	Fires with the next string on every keystroke and on clear.
onClear	() => void	no	Fires when the clear (×) button is pressed.
className	string	no	Classes for the component's OUTER box — the input-group that lays out the field and its affixes.
inputClassName	string	no	Classes for the <input> itself, for the rarer case of styling the field.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { useState } from "react";
import { SearchInput } from "@wizeworks/silicaui-react";
import { Section, Stack } from "../lib/Section";
import { SIZES } from "../lib/data";

export function SearchInputDemo() {
    const [query, setQuery] = useState("");

    return (
        <>
            <Section title="Colors">
                <Stack className="max-w-sm">
                    <SearchInput placeholder="Search…" />
                    <SearchInput color="primary" placeholder="Search…" defaultValue="silica" />
                    <SearchInput disabled placeholder="Search…" defaultValue="disabled" />
                </Stack>
            </Section>

            <Section title="Sizes">
                <Stack className="max-w-sm">
                    {SIZES.map((size) => (
                        <SearchInput key={size} size={size} placeholder={size} defaultValue={size} />
                    ))}
                </Stack>
            </Section>

            <Section title="Controlled">
                <Stack className="max-w-sm">
                    <SearchInput
                        value={query}
                        onValueChange={setQuery}
                        placeholder="Search components…"
                    />
                    <p className="text-xs opacity-60">
                        {query ? `Searching for "${query}"` : "Type to search, × to clear"}
                    </p>
                </Stack>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Leaf form inputs — native controls only; the show/hide + clear-button chrome the React versions add needs real JS, so those are dropped here rather than shipping a dead button (see the sync-gap memory). Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("SearchInput", undefined, { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "… …-primary" rather than passing a colour as a prop.

Takes children: no
Hydrated by: nothing — this one is static markup

The full API for Search Input, on every path, is available through the Silica MCP server.