/ux
Components/Inputs/SearchBox

SearchBox

Inputs

Search field with clear icon, loading state, and keyboard hints.

Styled search field that shows a keyboard shortcut hint when idle, a loading spinner while fetching, or a clear button when the value is non-empty. Two tones: default and inverted.

Usage

import { SearchBox } from "nosible-ux"

export default function Example() {
  return <SearchBox placeholder="Search signals..." shortcut="K" />
}

Examples

Tones

Loading state

Accessibility

Renders a search input (type search). Clear button has aria-label="Clear search". Loading state disables the clear button and replaces it with a spinner.

Props

Name TypeDefaultDescription
defaultValue
string | undefined""Uncontrolled initial query.
loading
boolean | undefinedfalseWhen true, shows a spinning indicator instead of the clear button.
onClear
(() => void) | undefined—Called when the user clears the field (Escape key or × button).
onValueChange
((value: string) => void) | undefined—Called on every keystroke with the new query.
shortcut
string | undefined—Optional keyboard shortcut hint shown when the field is empty. e.g. "⌘K"
size
"sm" | "md" | "lg" | null | undefined—
tone
"default" | "inverted" | null | undefined—
value
string | undefined—Controlled query string.
← All ComponentsGetting Started →