Keyboard Toolbar

Pro

Bar that rides on top of the keyboard with previous and next field arrows, a step indicator for each field, a custom middle slot and a Done button.

Preview

Installation

npx @lumioui/cli add pro/keyboard-toolbar

Usage

import { KeyboardToolbar } from "@/components/ui/keyboard-toolbar/keyboard-toolbar";
<KeyboardToolbar />

Examples

With field

A grocery app's delivery-address form.

API reference

Prop Type Default
onPrevious () => void

Show the previous/next chevrons and wire Previous.

 —
onNext () => void

Wire Next. Shown whenever onPrevious/onNext is provided.

 —
previousDisabled boolean

Disable the Previous arrow (e.g. first field).

 false
nextDisabled boolean

Disable the Next arrow (e.g. last field).

 false
onDone () => void

Done handler. Default: Keyboard.dismiss().

 —
doneLabel string

Done button label. Default "Done".

 "Done"
offset number

Extra lift above the keyboard in px. Default 0 — flush with it.

 0
children React.ReactNode

Optional custom content between the arrows and Done.

 —
steps number

Number of fields — shows one step light per field in the middle slot.

 —
step number

Index of the focused field (0-based); its light is lit.

 0
className string —