# Keyboard Toolbar

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.

> Composed · Pro · Mobile-Native — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/keyboard-toolbar
```

## Import

```tsx
import { KeyboardToolbar } from "@/components/ui/keyboard-toolbar/keyboard-toolbar";
```

## Variants

- `with-field` — With field: `npx @lumioui/cli add pro/keyboard-toolbar-with-field`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `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). |
| `nextDisabled?` | `boolean` | Disable the Next arrow (e.g. last field). |
| `onDone?` | `() => void` | Done handler. Default: Keyboard.dismiss(). |
| `doneLabel?` | `string` | Done button label. Default "Done". |
| `offset?` | `number` | Extra lift above the keyboard in px. Default 0 — flush with it. |
| `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. |
| `className?` | `string` | — |

## Icons rendered

- `chevron-up` — /icons.html?i=chevron-up
- `chevron-down` — /icons.html?i=chevron-down

Source: https://lumioui.com/components/keyboard-toolbar