Primitive / Organismbeta

Prompt Input

Auto-growing chat composer with send and stop, IME-safe Enter handling, attachment slot and character hint.

Edit on GitHub

pnpm dlx @glinui/cli@latest add prompt-input

2 attachedPress Enter to send, Shift and Enter for a new line.

Installation

Install from

pnpm dlx @glinui/cli@latest add prompt-input

Prefer the package?

Usage

Variants

import { PromptInput } from "@glinui/ui"


export function Demo() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <PromptInput variant="glinr" placeholder="glinr" showHint={false} />
      <PromptInput variant="plain" placeholder="plain" showHint={false} />
      <PromptInput variant="soft" placeholder="soft" showHint={false} />
      <PromptInput variant="outline" placeholder="outline" showHint={false} />
    </div>
  )
}

Glass (opt-in)

Glass is opt-in and needs a backdrop behind it: pick Photo or Vivid in the stage backdrop switcher.

import { PromptInput } from "@glinui/ui"


export function Demo() {
  return (
    <PromptInput variant="glass" defaultValue="Summarize this thread" />
  )
}

Accessibility

Native textarea with an aria-label and an aria-describedby hint for the send shortcut.
Enter during an IME composition (Japanese, Chinese, Korean) confirms the text and never sends.
While loading the field is read-only (focus is kept) and the stop button replaces send.
Send and stop buttons have explicit labels.

Keyboard Interactions

Key	Action
`Enter`	Send (default mode).
`Shift + Enter`	Insert a new line.
`Cmd/Ctrl + Enter`	Send in mod-enter mode.

ARIA Attributes

`aria-label` on the textarea
`aria-describedby` hint
`aria-busy` while loading

Reduced Motion

Focus and button transitions are disabled under reduced motion.

Affected properties

border-colorbox-shadowopacity

API Reference

Prop	Type	Required	Default	Description
`value / defaultValue`	`string`	-	`-`	Controlled or uncontrolled text.
`onSubmit`	`(value: string) => void`	No	`-`	Called with the trimmed text on send.
`onStop`	`() => void`	No	`-`	With loading, swaps the send button for a stop button.
`loading`	`boolean`	No	`false`	Read-only field, send blocked, aria-busy set.
`submitOn`	`"enter" \| "mod-enter"`	No	`enter`	Enter sends (Shift+Enter newline) or Cmd/Ctrl+Enter sends.
`maxLength`	`number`	No	`-`	Enables the character count hint.
`variant`	`ControlVariantProp`	No	`ambient (glinr)`	Shell look. Omit to follow the ambient design style (glinr = raised shell). Glass is opt-in.
`attachments / actions`	`ReactNode`	-	`-`	Slots above the textarea and in the footer.
`label`	`string`	No	`"Message"`	Accessible name of the textarea.
`actions`	`React.ReactNode`	No	`-`	Rendered at the start of the footer, e.g. attach and model buttons.
`attachments`	`React.ReactNode`	No	`-`	Rendered above the textarea, e.g. a row of `Attachment`.
`defaultValue`	`string`	No	`""`	Auto-generated from TypeScript source.
`disabled`	`boolean`	No	`false`	Auto-generated from TypeScript source.
`onValueChange`	`(value: string) => void`	No	`-`	Auto-generated from TypeScript source.
`placeholder`	`string`	No	`"Ask anything"`	Auto-generated from TypeScript source.
`rows`	`number`	No	`1`	Auto-generated from TypeScript source.
`sendLabel`	`string`	No	`"Send message"`	Auto-generated from TypeScript source.
`showHint`	`boolean`	No	`true`	Show the keyboard hint and character count.
`stopLabel`	`string`	No	`"Stop generating"`	Auto-generated from TypeScript source.
`value`	`string`	No	`-`	Auto-generated from TypeScript source.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { PromptInput } from "@glinui/ui"

Source Files

prompt-input.tsx

prompt-input.test.tsxtest

Dependencies

@glinui/ui@phosphor-icons/reactclass-variance-authority

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/prompt-input.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

PromptInputProps

`PromptInputProps`

Prop	Type	Required	Default	Description
`actions`	`React.ReactNode`	No	`-`	Rendered at the start of the footer, e.g. attach and model buttons.
`attachments`	`React.ReactNode`	No	`-`	Rendered above the textarea, e.g. a row of `Attachment`.
`defaultValue`	`string`	No	`""`	-
`disabled`	`boolean`	No	`false`	-
`label`	`string`	No	`"Message"`	Accessible name of the textarea.
`loading`	`boolean`	No	`false`	A response is streaming: input becomes read-only and send is blocked.
`maxLength`	`number`	No	`-`	-
`onStop`	`() => void`	No	`-`	When set and `loading`, the send button becomes a stop button.
`onSubmit`	`(value: string) => void`	No	`-`	Called with the trimmed value when the user sends.
`onValueChange`	`(value: string) => void`	No	`-`	-
`placeholder`	`string`	No	`"Ask anything"`	-
`rows`	`number`	No	`1`	-
`sendLabel`	`string`	No	`"Send message"`	-
`showHint`	`boolean`	No	`true`	Show the keyboard hint and character count.
`stopLabel`	`string`	No	`"Stop generating"`	-
`submitOn`	`"enter" \| "mod-enter"`	No	`"enter"`	`enter` sends on Enter (Shift+Enter newline). `mod-enter` sends on Cmd/Ctrl+Enter.
`value`	`string`	No	`-`	-
`variant`	`ControlVariantProp`	No	`-`	Shell look. Omit to follow the ambient design style (glinr = raised shell). Same vocabulary as Input.