Tools

Tool input

The one field a tool needs, its button, and examples to try.

openvibe-shared/kitJSON

Build it

kit.toolInput({ name: 'domain', label: 'A domain', placeholder: 'openvibe.live', button: 'Look it up', icon: 'search', tries: { items: [{ value: 'openvibe.live' }, { value: 'example.com' }] } })

Props

id
any?
icon
string?
name
string?
type
string?
label
string?
tries
any?
value
string?
action
string?
button
string?
hidden
object?
method
string?
pattern
any?
required
boolean?
inputmode
any?
maxlength
any?
placeholder
string?
autocomplete
string?

Anatomy

  • toolInputThe one field a tool needs, its button, and examples to try.

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
Tool input
Target
At least 44 × 44 px on touch
Focus
Visible keyboard focus; follow reading order

States

  • default

Tokens

  • color.bg.raised
  • color.text.primary

Android · Jetpack Compose

Material 3 Tool input

Use Tool input in Jetpack Compose with the shared tokens.

iOS · SwiftUI

Use Tool input in SwiftUI with the shared tokens.

Markup

Default

<form class="ovk-tool-form" method="get" action="?"><label class="ovk-tool-label" for="ovk-tool-domain">A domain</label><div class="ovk-tool-row"><span class="ovk-tool-field"><input id="ovk-tool-domain" name="domain" type="text" value="" placeholder="openvibe.live" autocomplete="off" spellcheck="false" autocapitalize="off" required><button type="button" class="ovk-tool-clear" data-ovk-clear="#ovk-tool-domain" aria-label="Clear" title="Clear" hidden><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5.4 5.4l13.2 13.2M18.6 5.4 5.4 18.6"/></svg></button></span><button type="submit" class="ovk-btn ovk-btn--primary ovk-tool-go"><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><span>Look it up</span></button></div><p class="ovk-try"><span>Try</span><a href="?domain=openvibe.live" data-ovk-try="openvibe.live" data-ovk-name="domain" data-ovk-for="#ovk-tool-domain">openvibe.live</a><a href="?domain=example.com" data-ovk-try="example.com" data-ovk-name="domain" data-ovk-for="#ovk-tool-domain">example.com</a></p></form>