Component registry

Search field

One search field for every site: a pill with suggestions, recent searches and a ghost completion.

All components · Kit documents · Definition as JSON

Live web demo

Type “me”, then Tab. Press / from anywhere on the page.

Web source: openvibe-shared/ov-searchbox · <input name="q" data-ov-searchbox="/api/v1/suggest" data-ov-examples="streams|clips">

Anatomy

  • markthe search glyph
  • fieldthe words
  • ghostthe rest of the first suggestion
  • clearempties the field
  • key"/" on a computer
  • listsuggestions, and recent searches while empty

Props

action
url
name
string
source
url
examples
string[]
recent
boolean

Behavior and accessibility

States
idle · focused · typing · suggesting · empty
Tokens
color.bg.raised · color.accent · size.tap
Keyboard
Keeps the focused control in view
Outside tap
Closes the surface
Scroll lock
Page remains scrollable
Reduced motion
Remove movement; keep the state change.
Accessibility
Search field. "/" puts the cursor in it; the arrows move in the list; Tab or → takes the ghost; Escape closes the list, then clears. At least 44 × 44 dp or pt for every touch action.

Android · Jetpack Compose

Use SearchBar with SearchBarDefaults.InputField; suggestions in the expanded view and recent searches while it is empty.

Material 3 container: SearchBar

iOS · SwiftUI

Use .searchable with searchSuggestions; recent searches as suggestions while the field is empty.

Example definition

{
  "schema": "design.component@1",
  "name": "search-field",
  "props": {
    "examples": [
      "components",
      "rules",
      "themes"
    ]
  }
}

Other components