Find a document
- Project notes
- Research library
- Travel plans
3 documents found.
Android search bar
A rounded Material search field with a leading icon and a clear action.
Preview
In action
When to use
Use it for
- Searching a collection within an Android screen.
- A 56-pixel search surface with a clear action.
Not for
- Selecting an option from autocomplete suggestions; use a combobox for that behavior.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { AndroidSearchBar } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/android-search-bar.
2. Vendor the source
npx @noorddev/vlak-cli add android-search-bar
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/android-search-bar.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { AndroidSearchBar } from "@noorddev/vlak-react";
<AndroidSearchBar aria-label="Search documents" placeholder="Search documents" value={query} onValueChange={setQuery} />Props
AndroidSearchBar
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | ||
defaultValue | string | "" | |
onValueChange | (value: string) => void | ||
clearLabel | string | "Clear search" | |
containerClassName | string | ||
containerStyle | CSSProperties |
Also accepts Omit< InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "size" >.
Keyboard
| Keys | Does |
|---|---|
| Tab | Focuses the search field and its clear action when present. |
| Escape | Clears an editable query and keeps focus in the field. |
| Enter | Uses the enclosing form's native submit behavior. |
Accessibility
- Uses input type search with native input attributes and ref.
- Provide a visible label or aria-label; a placeholder is not a label.
- The clear action follows the input onChange path, also calls onValueChange and returns focus to the field.
- Uncontrolled values follow native form reset.
Markup
<div class="rs-android-search-bar"><span class="rs-android-search-icon" aria-hidden="true">⌕</span><input class="rs-android-search-input" type="search" aria-label="Search documents" placeholder="Search documents" /></div>
Classes
.rs-android-search-bar.rs-android-search-bar-disabled.rs-android-search-input.rs-android-search-icon.rs-android-search-clear