KeyboardToolbar

When to use

Actions that belong to the field being edited: formatting marks, insert tools (checklist, photo, link), undo and redo, an AI action. The bar sits where the thumbs already are.
Taps that must not dismiss the keyboard. A press on a bar item never takes focus, so the caret stays in the editor (keepFocus, on by default).
A short set of tools that scrolls sideways. Group them with separators and pin a leading or trailing action when one matters most (Pinned actions).
A single-field step that ends in one action. One full-width button riding the keyboard lets the step be submitted without hiding the keys first (Primary action).
A floating capsule or a docked band, chosen by how much of the editor you want to keep in view: floating leaves a gap above the keys, docked sits flush on them.

When not to use

For actions unrelated to what is being typed. Page-level navigation belongs in BottomNav; an always-visible set of tools on a desktop surface is a plain Toolbar.
For rarely used actions. Put them in a DropdownMenu opened from the bar (Menu) rather than adding another tool.
Inside a Drawer. The sheet already lifts with the keyboard; render the bar with portal={false} in its footer instead (Composition).
To rebuild the browser's own field bar. Some phone browsers draw their own previous, next and done strip above the keyboard for form fields; the bar sits above it, so do not duplicate it.
For several editors that need different tools on one screen. fallback="hidden" and the dismiss button react to any editable element on the page, so mount one bar per screen, next to the editor it serves.

Installation

Terminal

pnpm add @tessinaui/ui

Usage

A desktop has no software keyboard, so every preview on this page renders the bar in place (portal={false}). To see it ride a real keyboard, open the device test page on a phone.

example.tsx

import { KeyboardToolbar, KeyboardToolbarDismiss, Toolbar, ToolbarButton } from "@tessinaui/ui";

example.tsx

{/* The iOS Notes bar — a floating capsule that scrolls, and a dismiss circle. */}
<textarea aria-label="Note" />

<KeyboardToolbar>
  <Toolbar aria-label="Formatting" variant="floating" rounded="full" className="flex-1">
    <ToolbarButton iconOnly leadingIcon={<ListTodo />} aria-label="Checklist" />
    <ToolbarButton iconOnly leadingIcon={<Bold />} aria-label="Bold"
      pressed={bold} onClick={() => setBold((v) => !v)} />
    <ToolbarButton iconOnly leadingIcon={<Camera />} aria-label="Attach photo" />
  </Toolbar>
  <KeyboardToolbarDismiss />
</KeyboardToolbar>

{/* A full-width band flush on the keyboard, shown only while editing. */}
<KeyboardToolbar variant="docked" fallback="hidden">
  <Toolbar aria-label="Insert" variant="ghost" className="flex-1">…</Toolbar>
  <KeyboardToolbarDismiss />
</KeyboardToolbar>

Examples

Default

The iOS 26 Notes bar: a floating capsule of tools that scrolls sideways, and a separate circle that hides the keyboard.

Docked

variant="docked" is a full-width band flush on the keyboard with a hairline top edge. Pair it with a ghost Toolbar so the band is the only surface.

Formatting

History first, then the marks. pressed paints the active mark and announces it, and pressing one keeps the caret in the note.

A style menu opened from the bar opens above it with side="top", because below the bar is the keyboard.

Pinned actions

An AI action leading and Send trailing, with the tools scrolling between them. Each pin is its own one-item Toolbar, so it stays put while the rail scrolls.

Stacked rows

Task details as chips above the formatting bar. Wrap the rows in a column and keep the dismiss outside it.

Labeled items

Text labels beside icons for actions a glyph alone does not name.

Fill

A short, fixed set spread across the whole width instead of scrolling. Use it only when the set fits at the narrowest width.

Primary action

One full-width button riding the keyboard, so a single-field step can be submitted without dismissing the keyboard first.

Disabled items

Unavailable actions stay in place, muted, so nothing shifts when they become available.

What the bar does while no keyboard is up: sticky stays docked at the bottom (and is what a desktop shows); hidden appears only while something editable has focus. Focus either note to bring the right-hand bar in.

RTL

KeyboardToolbar has no dir prop, but a dir="rtl" attribute lands on the bar itself, portalled or not, so the tools start from the right and the dismiss capsule moves to the left. Give the inner Toolbar its own dir as well, because that is what flips its arrow keys.

Composition

The actions are a normal Toolbar. KeyboardToolbar only positions them: variants, sizes, the scroll rail, groups, pressed state and arrow-key traversal all come from Toolbar unchanged. The one exception: while a touch-screen user types, the bar's buttons leave the tab order (see Accessibility). Give the bar a name with aria-label.

Fill the width yourself. Add className="flex-1" to the Toolbar that should grow. The bar sets min-w-0 on every child Toolbar so a long rail scrolls instead of widening the page, but it leaves growth to you, so a pinned one-item Toolbar beside the rail keeps its own width.

Match the dismiss size to the bar. KeyboardToolbarDismiss sits beside the Toolbar, not inside it, so it stays pinned while the rail scrolls. It cannot read the Toolbar's size, so pass the same one: <KeyboardToolbarDismiss size="lg" /> next to <Toolbar size="lg">.

Inside a Drawer, let the drawer handle the keyboard. A bottom sheet already lifts with the keyboard, and a portaled bar inside it would lift twice. Render the bar with portal={false} in the sheet's footer instead.

API Reference