Prompt Box
Collect clear instructions with suggestions, keyboard submission, length limits, and cancellation.
Available in ngbootstrap 2.2.0. All examples below simulate responses locally; no model or network request is used.
Start a development task
A compact composer turns an instruction and a work mode into one application-owned task.
What should we work on?
Turn a rough idea into a focused development task.
Enter starts the task · Shift+Enter adds a line
No action yet.
When to use it
- Ask an operational question without opening a conversation.
- Collect a report-generation instruction or search request.
Inputs and events
| Member | Type | Behavior |
|---|---|---|
value / valueChange | string / string | Two-way editable instruction. |
suggestions | readonly string[] | Buttons fill the input without submitting. |
busy / disabled | boolean | Busy locks editing and exposes Stop; disabled blocks controls. |
maxLength | number = 4000 | Rejects over-limit values, including externally assigned text. |
submitOnEnter / clearOnSubmit | boolean = true | Shift+Enter always inserts a newline; IME composition never submits. |
label / placeholder / submitLabel / stopLabel | string | Customize visible composer text. |
promptSubmit / stop | string / void | Send trimmed text or request application cancellation. |
Use stable unique message, response, and field IDs. Update input arrays immutably for OnPush rendering. Model outputs render as plain text, including code and HTML; Markdown rendering and attachments are not part of this API.
Connect your backend
This request sketch belongs in your application service. Adapt its endpoint and response schema to your backend; it is not a built-in ngbootstrap endpoint. Set busy immediately, handle errors, and discard results from canceled or superseded requests.
// Application-owned service call. Keep provider credentials on your server.
const controller = new AbortController();
const response = await fetch('/api/assistant', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt }),
signal: controller.signal,
});
if (!response.ok) throw new Error('Request failed');
const result: unknown = await response.json();
// Validate result before updating the component's messages or responses.
// On Stop or destruction: controller.abort(); ignore stale request IDs.
// Set busy/error from your request lifecycle; the components do not fetch.
Keyboard and review behavior
Controls use native buttons, labeled inputs, visible focus indicators, and status or error announcements. Tab and Shift+Tab move between controls; Enter or Space activates native buttons. Busy prompts keep the input read-only and the Stop action reachable without replacing the action button. Prompt Box supports Enter to submit and Shift+Enter for a new line, while respecting text composition. Inline Prompt closes with Escape and returns focus to its trigger. Generated drafts have a named, keyboard-focusable scroll region. Inline and paste proposals announce when they are ready. Smart Paste uses ordinary paste into a textarea and requires explicit selection and application of proposed values.