Loading…

AI Prompt Input

The composer: auto-growing textarea, send-on-Enter, and a send/stop control.

AI
1 file
No extra npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add ai-prompt-input

No npm packages are needed beyond what Dowel already requires.

Usage

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

app/page.tsxTSX

import { PromptInput } from "@/components/ui/ai-prompt-input";

Examples

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

Default
Busy
With Model And Counter
Disabled
Send Stop Morph
Counter Reveal

API

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

<PromptInput>

Prop	Type	Default
`busy` A response is in flight: submission is blocked and Stop is shown instead.	`boolean`	`false`
`disabled` Blocks submission and dims the composer.	`boolean`	`false`
`onSubmit`	`(event: FormEvent<HTMLFormElement>) => void`	—

Plus every attribute of <form> except onSubmit.

<PromptInputTextarea>

Prop	Type	Default
`maxRows`	`number`	`DEFAULT_MAX_ROWS`
`submitOnEnter` Send on Enter, newline on Shift+Enter. Turn it off for a composer where Enter should always insert a newline and sending is only ever an explicit button press.	`boolean`	`true`

Plus every attribute of <textarea> except rows.

<PromptInputToolbar>

Plus every attribute of <div>.

<PromptInputSubmit>

Prop	Type	Default
`label` Label while idle.	`string`	`"Send message"`
`onStop` Called instead of submitting when busy.	`() => void`	—
`stopLabel` Label while a response is streaming.	`string`	`"Stop generating"`

Plus every attribute of <button>.

<PromptInputCounter>

Prop	Type	Default
`max` (required)	`number`	—
`value` (required)	`number`	—
`warnAt` Fraction of the limit past which the counter starts warning.	`number`	`0.9`

Plus every attribute of <div>.

Accessibility

Enter sends and Shift+Enter inserts a newline, but never while an IME composition is active — for Japanese, Chinese and Korean input Enter confirms a candidate, and sending there truncates the sentence mid-word. The submit control renames itself to "Stop generating" while busy, so its accessible name always matches what it does. The character counter stays silent until it nears the limit; announcing every keystroke would be unusable.

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

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Prop

Type

Default

busy

A response is in flight: submission is blocked and Stop is shown instead.

boolean

false

disabled

Blocks submission and dims the composer.

boolean

false

onSubmit

(event: FormEvent<HTMLFormElement>) => void

—

Prop

Type

Default

maxRows

number

DEFAULT_MAX_ROWS

submitOnEnter

Send on Enter, newline on Shift+Enter. Turn it off for a composer where Enter should always insert a newline and sending is only ever an explicit button press.

boolean

true

Prop

Type

Default

label

Label while idle.

string

"Send message"

onStop

Called instead of submitting when busy.

() => void

—

stopLabel

Label while a response is streaming.

string

"Stop generating"

Prop

Type

Default

max

number

—

value

number

—

warnAt

Fraction of the limit past which the counter starts warning.

number

0.9