Components

Search Input

Search field with a leading magnifier and a clear button that appears once there is text. Escape clears too.

Usage

Use it to:

  • filter a list, table, menu or settings page as you type
  • the query field of a search dialog (variant="bare")

Don’t use it to:

  • general text entry (use TextInput)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/SearchInputExample.tsx
import { useState } from 'react';
import { SearchInput } from '@krackedui/motion';

export function SettingsSearch() {
  const [query, setQuery] = useState('Design');
  return (
    <>
      <SearchInput
        aria-label="Search settings"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onClear={() => setQuery('')}
        placeholder="Search settings"
      />
    </>
  );
}

Examples

Uncontrolled

Without value the field clears itself.

Size

Bare

The unboxed header field of a search dialog.

Dark theme

API Reference

SearchInput

An <input type="search"> in the TextInput box; supports every TextInput prop except icon and type. Adds:

PropTypeDefault
invalid
boolean
false
disabled
boolean
false
required
boolean
false
name
string
onClear
() => void
clearLabel
string
"Clear search"
variant
"field""bare"
"field"
size
"sm""md""lg"
"md"
placeholder
string
"Search"
trailing
ReactNode
inputClassName
string

Accessibility

  • role="searchbox". Escape clears a non-empty field (and does not close the surrounding dialog); an empty field lets Escape through.
  • The clear button is a real button (“Clear search”), reachable with Tab; focus returns to the field after clearing.
  • Name the field with aria-label or Field.
© 2026 Motion. Internal documentation.