Search Input

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Auxiliary

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

ShortCut Indicator

Preview

index.tsx

Preview

index.tsx

States

Preview

index.tsx

Error message

Preview

index.tsx

Error message

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Error message

Preview

index.tsx

Error message

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Floating label

Preview

index.tsx

Floating Label

Preview

index.tsx

Floating Label

Preview

index.tsx

Floating LabelError message

Preview

index.tsx

Floating LabelError message

Preview

index.tsx

Preview

index.tsx

Size Medium

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Auxiliary (Alternative)

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

States (Alternative)

Preview

index.tsx

Error message

Preview

index.tsx

Error message

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Floating label (Alternative)

Preview

index.tsx

Floating Label

Preview

index.tsx

Floating Label

Preview

index.tsx

Floating LabelError message

Preview

index.tsx

Floating LabelError message

Preview

index.tsx

Preview

index.tsx

Design Tokens for SearchInput

Note: SearchInput uses the same design tokens as the Input component. See Input documentation for available tokens.

SearchInput API Reference

`<SearchInput />`

Prop	Type	Default	Description
isPending	boolean	false	Show loading spinner in place of search icon
searchButton	boolean	false	Show a clickable search button
searchButtonProps	object		Props for the search button
auxiliaryIcon	ReactNode		Icon/button displayed on the right side
auxiliaryActive	boolean	false	If true, auxiliary action uses styled Button
auxiliaryActionProps	object		Props for the auxiliary action button
shortCut	string		Keyboard shortcut indicator (e.g. "Ctrl+K")
shortCutButtonProps	object		Props for the shortcut button
onSearch	function ()		Callback when search is triggered
onAuxiliaryAction	function ()		Callback when auxiliary action is triggered
...InputProps	See Input		Inherits all props from Input and native input

Note: SearchInput inherits all props from Input and the native input element. See Input documentation for full details on available props and tokens.