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.
Playground
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.
Examples
Default
The simplest search field with a built-in search icon and clear button.
Variants
Three visual styles — default (bordered), filled (background), and minimal (bottom border only).
Sizes
Five sizes from xs to xl, controlling height, padding, and icon scale.
Intents
Use intent with supportingText to convey error, warning, success, and info feedback.
With Submit Button
Set showSubmitButton to render a submit button inside the field.
Keyboard Shortcut
Enable showShortcut to display a ⌘K hint and register a global focus shortcut.
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
Scroll Area
A scrollable container with custom overlay scrollbars that do not steal layout space. Supports vertical, horizontal, and both-axis content with a neutral branded thumb, RTL, and a compound API for full control.
SegmentedControl
A radio-group style control where one segment is selected at a time, with outline, filled, and pill variants, horizontal and vertical orientations, and full keyboard navigation