Search
A search input with built-in search icon, clear button, optional submit button, loading state, and full RTL support. Follows the Field component's design language with three visual variants.
Installation
pnpm add @tessinaui/uiUsage
import { Search } from "@tessinaui/ui";<Search placeholder="Search..." onSearch={(value) => console.log(value)} />The search component wraps a native <input type="search"> inside a <form role="search"> landmark for proper accessibility. It automatically provides a search icon, handles Escape to clear, and Enter to submit.
Playground
Configure every property interactively:
Preview
Loading...
Showcase
All variants, sizes, intents, and feature combinations:
Preview
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "filled" | "minimal" | "default" | Visual variant. default has a border, filled has a background, minimal has only a bottom border |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Controls height, padding, and text/icon size |
rounded | "full" | "lg" | "md" | "sm" | "none" | "full" | Border radius. Ignored for minimal variant |
intent | "none" | "error" | "warning" | "success" | "info" | "none" | Controls border/ring color and supporting text styling |
label | string | -- | Label text above the search field |
required | boolean | false | Shows a red * after the label and sets aria-required |
supportingText | string | -- | Text below the input. Color and icon follow intent |
searchLabel | string | "Search" | Accessible label for the search form landmark (aria-label) |
clearable | boolean | true | Shows a clear button when the input has a value |
onClear | () => void | -- | Called when the clear button is clicked |
onSearch | (value: string) => void | -- | Called when the user presses Enter or clicks the submit button |
showSubmitButton | boolean | false | Shows a submit button inside the search field |
submitButtonText | string | "Search" | Text for the submit button |
loading | boolean | false | Shows a loading spinner instead of the search icon |
showShortcut | boolean | false | Shows ⌘K hint when empty, Esc when dirty. Registers a global Cmd/Ctrl+K listener to focus the input |
disabled | boolean | false | Disables the input and all interactive elements |
dir | "ltr" | "rtl" | -- | Text direction. RTL flips the full layout |
placeholder | string | "Search..." | Native placeholder text |
value / defaultValue | string | -- | Controlled / uncontrolled value |
onChange | ChangeEventHandler | -- | Native onChange handler |
wrapperClassName | string | -- | Extra className for the outer <form> element |
containerClassName | string | -- | Extra className for the bordered container <div> |
All other native <input> attributes (name, autoComplete, autoFocus, etc.) are forwarded.
Keyboard Interactions
| Key | Action |
|---|---|
Enter | Submits the search (calls onSearch) |
Escape | Clears the input value |
⌘K / Ctrl+K | Focuses the search input (when showShortcut is enabled) |
Accessibility
- Wrapped in a
<form role="search">landmark witharia-label - Uses native
<input type="search">withrole="searchbox" aria-requiredandaria-invalidset from props- Clear button uses
aria-label="Clear search" - Focus ring follows WCAG 2.1 AA:
focus-visible:ring-2 - Touch targets meet 44x44px minimum