Components / Assistant / Ask panel
A1 · Assistant New
Ask panel
Questions over the example register. A write shows a confirm card before it changes anything.
<form data-ask-form>
<label>Question<input name="q"></label>
<button type="submit">Send</button>
</form>
<div class="card" hidden>
<p>Set the owner of DOC-1104 to M. Chen.</p>
<button type="button">Confirm</button>
<button type="button">Cancel</button>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- Questions can be answered from a known local set.
- A write must wait for an explicit confirm.
When not to use
- The panel would send the text to a service.
- There is no local data to answer from.
Usage
<form data-ask-form>
<label>Question<input name="q"></label>
<button type="submit">Send</button>
</form>
<div class="card" hidden>
<p>Set the owner of DOC-1104 to M. Chen.</p>
<button type="button">Confirm</button>
<button type="button">Cancel</button>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data-log | region | — | Questions and replies. aria-live=polite. |
| data-confirm | card | hidden | Shown before a write. |
| data-owner | text | Unassigned | Updates only after Confirm. |
Keyboard
| Key | Action |
|---|---|
| Enter | Sends the question. |
| Enter | On Confirm or Cancel, resolves the write. |
| Escape | Does not close the page. Cancel is the explicit control. |
Accessibility
- The log is a polite live region.
- Confirm and Cancel are separate buttons.
- The owner line is visible, so the write has a place to land.
Motion
- Messages append without an enter animation.
Pattern origin
Pattern type: a question panel over local data, with a confirm step before a write.