MVP / agentic
ask user question
A native, resumable question flow for a small set of meaningful options.
Specimen
A native, resumable question flow for a small set of meaningful options. Copy Preview, Code, or Install from the tabs. The raw file and standalone fixture remain below.
Preview
No runtime required. The host owns state, persistence, and any execution boundary.
Code
ask-user-question.html
<style>
.au-ask-user-question { background: var(--au-surface); border: 1px solid var(--au-border-color); border-radius: var(--au-radius-lg); padding: 20px; }
.au-ask-user-question__eyebrow { color: var(--au-action); font: 600 10px/1.3 var(--au-font-mono); letter-spacing: 0.06em; margin: 0 0 7px; text-transform: uppercase; }
.au-ask-user-question__title { font-size: 16px; letter-spacing: -0.02em; line-height: 1.3; margin: 0 0 16px; }
.au-ask-user-question__options { border: 0; display: grid; gap: 8px; margin: 0; padding: 0; }
.au-ask-user-question__option { align-items: center; background: var(--au-surface-muted); border: 1px solid var(--au-border-color); border-radius: var(--au-radius-md); color: var(--au-fg-muted); cursor: pointer; display: flex; gap: 10px; min-height: 42px; padding: 9px 12px; transition: border-color var(--au-duration-fast) var(--au-ease), background-color var(--au-duration-fast) var(--au-ease); }
.au-ask-user-question__option:hover { border-color: var(--au-border-emphasis); }
.au-ask-user-question__option:has(input:checked) { background: var(--au-action-soft); border-color: var(--au-action); color: var(--au-fg); }
.au-ask-user-question__option input { accent-color: var(--au-action); }
.au-ask-user-question__footer { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-top: 16px; }
.au-ask-user-question__hint { color: var(--au-fg-subtle); font: 10px/1.4 var(--au-font-mono); }
@media (prefers-reduced-motion: reduce) { .au-ask-user-question__option { transition-duration: 0.01ms; } }
</style>
<form class="au-ask-user-question" method="post">
<p class="au-ask-user-question__eyebrow">needs your input</p>
<h2 class="au-ask-user-question__title">Which release channel should the agent target?</h2>
<fieldset class="au-ask-user-question__options"><legend class="sr-only">Release channel</legend><label class="au-ask-user-question__option"><input type="radio" name="channel" value="internal" checked> Internal preview</label><label class="au-ask-user-question__option"><input type="radio" name="channel" value="public"> Public release</label></fieldset>
<div class="au-ask-user-question__footer"><span class="au-ask-user-question__hint">The answer resumes the plan.</span><button class="au-btn au-btn--primary" type="submit">Continue</button></div>
</form>Install
head.html
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/ask-user-question/ask-user-question.css">Component contract
- Dependencies
tokens.css,ask-user-question.css,button.css for submit actions.- States
- `waiting`, `answered`, `error`, and `cancelled` describe the question and its resumable plan.
- CSS variables
- No component-specific variables. Option surfaces use the shared surface, border, action, and foreground tokens.
- Events
- Native form, focus, and click events. No custom event or runtime is required.
- No JavaScript
- The form submits normally and options remain visible. Inline resume is an optional enhancement.
- Host boundary
- The host owns validation, persistence, authorization, plan resumption, and any follow-up question.
Accessibility and security
Keep the state explicit.
Accessibility: Use a fieldset and legend, label each radio or checkbox, keep the submit action concrete, and announce the resumed state. Security: Treat answers as untrusted input. Validate allowed values, authorization, plan version, and stale submissions on the server.
Source files
The page is documentation, not a package boundary. Copy the raw files and edit them in your application.