Find

A search, or "add by name": a pill with an icon, the field and a round button.

openvibe-shared/kitJSON

Build it

kit.find({ action: '/search', name: 'q', placeholder: 'Search streams, people and rooms', label: 'Search' })

Props

id: any?
icon: string?
name: string?
type: string?
extra: string?
inset: boolean?
label: string?
value: string?
action: string?
button: any?
hidden: object?
method: string?
pattern: any?
required: boolean?
maxlength: any?
placeholder: string?

Anatomy

findA search, or "add by name": a pill with an icon, the field and a round button.

Behaviour and access

Keyboard: Keeps the focused control in view
Outside tap: Leaves it open
Scroll: The page still scrolls
Reduced motion: Remove movement; keep the state change.
Name: Find
Target: At least 44 × 44 px on touch
Focus: Visible keyboard focus; follow reading order

States

default

Tokens

color.bg.raised
size.tap

Android · Jetpack Compose

OutlinedTextField

Use an OutlinedTextField with a search leading icon and a trailing submit Button.

iOS · SwiftUI

Use .searchable or a TextField with a submit Button.

Markup

Default

<form class="ovk-find" method="get" action="/search" role="search"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></svg><label for="ovk-find-q" class="ovk-sr">Search</label><input id="ovk-find-q" name="q" type="search" value="" placeholder="Search streams, people and rooms" autocomplete="off"><button type="submit" class="ovk-go" aria-label="Search" title="Search"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m9 5 7 7-7 7"/></svg></button></form>