Find a note
Studio measurements
Braun reference
Weekend route
3 notes
iOS search field
A 48px search capsule with a native input and a separate clear action.
Preview
In action
When to use
Use it for
- Search within a list, app or document.
- Use onValueChange to respond to both typing and the clear button.
Not for
- Treating a placeholder as the only accessible label.
- A noneditable search launcher; use a button.
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 { IOSSearchField } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/ios-search-field.
2. Vendor the source
npx @noorddev/vlak-cli add ios-search-field
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/ios-search-field.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 { IOSSearchField } from "@noorddev/vlak-react";
<IOSSearchField name="q" aria-label="Search notes" placeholder="Search" onValueChange={query => console.log(query)} />Props
IOSSearchField
A 48px search capsule with a native input and an explicit clear target.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | ||
defaultValue | string | "" | |
onValueChange | (value: string) => void | Fires when typing or using the clear action. | |
clearLabel | string | "Clear search" |
Also accepts Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "children">.
Keyboard
| Keys | Does |
|---|---|
| Tab, Shift+Tab | Moves between the native search input and the clear button when text is present. |
| Enter, Space on Clear | Clears the text and returns focus to the input. |
| Enter in the input | Uses the enclosing form’s native submit behavior. |
Accessibility
- A native search input accepts labels, form attributes, required, disabled and readOnly.
- Clearing is a 44px action; native form reset is supported and canceled reset is respected.
Markup
<div class="rs-ios-search-field"><input class="rs-ios-search-field-input" type="search" aria-label="Search notes" placeholder="Search" /></div>
Classes
.rs-ios-search-field.rs-ios-search-field-disabled.rs-ios-search-field-symbol.rs-ios-search-field-input.rs-ios-search-field-clear