Loading…

Command Bar

beta

A compact one-row prompt bar — auto-growing field, dictate toggle and send — composed from AI Prompt Input.

AI
1 file
1 npm package
Accessibility notes

Playground

Installation

The CLI installs ai-prompt-input as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add command-bar

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { CommandBar } from "@/components/ui/command-bar";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery

API

Generated from the component's own types, so a prop cannot appear here without existing.

<CommandBar>

Prop	Type	Default
`defaultDictating`	`boolean`	`false`
`defaultValue`	`string`	`""`
`dictateLabel`	`string`	`"Dictate"`
`dictating` Whether dictation is on. Omit `onDictatingChange` to hide the button.	`boolean`	—
`label` The field's accessible name.	`string`	`"Message"`
`leading` Slot before the field, e.g. an attach button.	`ReactNode`	—
`maxRows` Rows the field grows to before scrolling.	`number`	`6`
`onDictatingChange`	`(dictating: boolean) => void`	—
`onSend` Called with the trimmed text. An uncontrolled bar then clears itself.	`(value: string) => void`	—
`onStop`	`() => void`	—
`onValueChange`	`(value: string) => void`	—
`placeholder`	`string`	`"Ask anything…"`
`sending` A send is in flight: sending is blocked and the button becomes Stop.	`boolean`	`false`
`sendLabel`	`string`	`"Send"`
`shape`	`"pill" \| "rounded"`	`"pill"`
`stopLabel`	`string`	`"Stop"`
`value`	`string`	—

Accessibility

Inherits AI Prompt Input's behaviour: Enter sends, Shift+Enter adds a newline, never mid-IME-composition, and the submit control renames itself to "Stop" while sending. The field is named by `label`. Send is disabled while the field is empty. Dictate is a toggle button (aria-pressed); the consumer owns the microphone.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

defaultDictating

boolean

false

defaultValue

string

""

dictateLabel

string

"Dictate"

dictating

Whether dictation is on. Omit onDictatingChange to hide the button.

boolean

—

label

The field's accessible name.

string

"Message"

leading

Slot before the field, e.g. an attach button.

ReactNode

—

maxRows

Rows the field grows to before scrolling.

number

6

onDictatingChange

(dictating: boolean) => void

—

onSend

Called with the trimmed text. An uncontrolled bar then clears itself.

(value: string) => void

—

onStop

() => void

—

onValueChange

(value: string) => void

—

placeholder

string

"Ask anything…"

sending

A send is in flight: sending is blocked and the button becomes Stop.

boolean

false

sendLabel

string

"Send"

shape

"pill" | "rounded"

"pill"

stopLabel

string

"Stop"

value

string

—