Prompt Box

Spring-animated AI prompt with model controls and voice or send.

Installation

npx shadcn@latest add @iconiq/prompt-box

Props

PromptInput

Expandable prompt surface that grows from a compact pill into a textarea with model controls, attachment action, and send or voice affordances.

onSubmit(value: string) => void

Called with the trimmed prompt when the user presses Enter without Shift or clicks the send button.

placeholderstring

Placeholder copy for the collapsed and expanded prompt field.

menuActionsPromptMenuAction[]

Optional dropdown actions rendered above setting groups. Each action has `label`, optional `icon`, and `onSelect`.

plusMenuItemsPromptPlusMenuItem[]

Items for the plus-button add menu. Actions use `onSelect` with optional `shortcut`. Submenus pass `options` and `onOptionSelect`.

settingGroupsPromptSettingGroup[]

Grouped settings for the footer menu. Use `display: "featured"` for a selected summary row, `display: "submenu"` for a value row with flyout, and `moreMenuLabel` for an extra picker row (e.g. More models). Options support optional `description` text.

settingsRecord<string, string>

Controlled map of selected values keyed by setting group id.

defaultSettingsRecord<string, string>

Initial selected values for uncontrolled usage, keyed by setting group id.

onSettingsChange(settings: Record<string, string>) => void

Called when the user picks a new option in any settings group.

Built on Base UI Input — collapsed state uses a read-only field, expanded state renders a textarea through the `render` prop.

Click the collapsed field to expand and focus the prompt input.

Press Enter to submit when the field has content; Shift+Enter inserts a newline.

The expanded surface starts compact and grows with your prompt up to 300px, then scrolls inside the textarea.

Press Escape or blur away with an empty draft to collapse back to the compact pill.

The settings menu shows optional `menuActions`, then featured model rows, submenu rows with current values, and optional more-menu flyouts separated by dividers.

The plus button opens an optional add menu when `plusMenuItems` is provided. Items support icons, keyboard shortcuts, and nested submenus.

The footer reveals the settings popover and plus add menu while expanded.

The trailing action button shows a microphone icon when empty and an arrow icon once text is entered.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @base-ui/react, motion, lucide-react.

The generated registry file is /r/prompt-box.json.