Component

Search Input

Search field with a leading icon and a clear button that appears once there is a value.

Basic

With a value

The clear button only appears once there is something to clear.

Sizes

The same sm / md / lg scale as Input.

States

Invalid and disabled.

Without the clear button

clearable={false} for a search that submits rather than filters as you type.

Clearing dispatches a native input event, so a controlled value and an uncontrolled one both stay in step

API reference

Prop	Type	Default	Description
clearable	boolean	true	Shows the "X" clear button once there is a value. Default true. `Input`'s `endSlot` and `clearable` are omitted from the props so they can't replace or duplicate this button.
invalid	boolean	None	Manually flags the invalid visual/aria state for standalone use outside a FormField.
size	ComponentSize	None	Control height and padding, matching `Button` at the same value.

clearabletrue

boolean

Shows the "X" clear button once there is a value. Default true. `Input`'s `endSlot` and `clearable` are omitted from the props so they can't replace or duplicate this button.

invalidNone

boolean

Manually flags the invalid visual/aria state for standalone use outside a FormField.

sizeNone

ComponentSize

Control height and padding, matching `Button` at the same value.

Also accepts everything from Omit<InputProps, "type" | "startSlot" | "endSlot" | "clearable">.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent