Create agent task
Two quick questions before the agent starts.
Questionnaire
Multi-step form wizard over plain sibling forms. Each Continue validates natively; completion merges every step into one FormData event.
INSTALL
1pnpm dlx @sayagodev/mo add questionnaireOr import the files from the package (no copy):
1import "@sayagodev/mo/css/questionnaire.css";2import "@sayagodev/mo/js/questionnaire.js";
EXAMPLES
Workspace setup
1<mo-questionnaire>2 <div data-questionnaire-progress></div>3 4 <form data-questionnaire-step>5 <h3>Account details</h3>6 <p>Tell us who will own this workspace.</p>7 <div data-field>8 <label for="q-name">Full name</label>9 <input id="q-name" name="name" required placeholder="Evil Rabbit" />10 </div>11 <div data-field>12 <label for="q-email">Email</label>13 <input id="q-email" name="email" type="email" required placeholder="[email protected]" />14 <small data-hint>Workspace invitations are sent from this address.</small>15 </div>16 <footer>17 <button type="button" class="ghost" data-questionnaire-back>Back</button>18 <button type="submit">Continue</button>19 </footer>20 </form>21 22 <form data-questionnaire-step hidden>23 <h3>Preferences</h3>24 <p>Choose how your workspace behaves out of the box.</p>25 <fieldset>26 <legend>Visibility</legend>27 <div class="vstack gap-2">28 <label><input type="radio" name="visibility" value="private" checked /> Private — invite only</label>29 <label><input type="radio" name="visibility" value="team" /> Team — anyone with the link</label>30 </div>31 </fieldset>32 <fieldset>33 <legend>Progress updates</legend>34 <p class="text-light">Select all that apply, or skip this question.</p>35 <div class="vstack gap-2">36 <label><input type="checkbox" name="signals" value="tool-calls" checked /> Tool call timeline</label>37 <label><input type="checkbox" name="signals" value="approvals" /> Approval checkpoints</label>38 <label><input type="checkbox" name="signals" value="handoffs" /> Sub-agent handoffs</label>39 </div>40 </fieldset>41 <footer>42 <button type="button" class="ghost" data-questionnaire-back>Back</button>43 <button type="submit">Save plan</button>44 </footer>45 </form>46</mo-questionnaire>47
Validation gate
1<mo-questionnaire>2 <div data-questionnaire-progress></div>3 4 <form data-questionnaire-step>5 <h3>How much detail should the answer include?</h3>6 <p>Both fields are required — Continue stays on this step until they validate.</p>7 <div data-field>8 <label id="qv-detail-label">Detail level</label>9 <mo-select data-placeholder="Select a depth…" name="detail" required aria-labelledby="qv-detail-label">10 <button type="button" popovertarget="qv-detail-list" data-select-trigger aria-label="Detail level"></button>11 <ul popover id="qv-detail-list" class="popover" role="listbox" aria-label="Detail levels">12 <li><button type="button" role="option" value="summary">Concise summary</button></li>13 <li><button type="button" role="option" value="complete">Complete answer</button></li>14 </ul>15 </mo-select>16 </div>17 <div data-field>18 <label for="qv-audience">Audience</label>19 <input id="qv-audience" name="audience" required placeholder="My team or public audience" />20 </div>21 <footer>22 <button type="button" class="ghost" data-questionnaire-back>Back</button>23 <button type="submit">Continue</button>24 </footer>25 </form>26 27 <form data-questionnaire-step hidden>28 <h3>Review</h3>29 <p>Everything checks out. Submit to save the configuration.</p>30 <footer>31 <button type="button" class="ghost" data-questionnaire-back>Back</button>32 <button type="submit">Validate answers</button>33 </footer>34 </form>35</mo-questionnaire>36
Inside a card
1<article class="card">2 <header>3 <h3>Create agent task</h3>4 <p>Two quick questions before the agent starts.</p>5 </header>6 <mo-questionnaire>7 <div data-questionnaire-progress></div>8 9 <form data-questionnaire-step>10 <h3>What should the agent work on?</h3>11 <p>Choose the task that should be handled next.</p>12 <div class="vstack gap-2">13 <label><input type="radio" name="task" value="fix" checked /> Fix the failing tests</label>14 <label><input type="radio" name="task" value="refactor" /> Refactor the data layer</label>15 <label><input type="radio" name="task" value="docs" /> Update the integration guide</label>16 </div>17 <footer>18 <button type="button" class="ghost" data-questionnaire-back>Back</button>19 <button type="submit">Next</button>20 </footer>21 </form>22 23 <form data-questionnaire-step hidden>24 <h3>What should the final handoff include?</h3>25 <p>Pick the level of detail needed for review.</p>26 <div class="vstack gap-2">27 <label><input type="radio" name="output" value="summary" /> Summary only</label>28 <label><input type="radio" name="output" value="files" checked /> Summary and changed files</label>29 <label><input type="radio" name="output" value="review" /> Full review handoff</label>30 </div>31 <footer>32 <button type="button" class="ghost" data-questionnaire-back>Back</button>33 <button type="submit">Create task</button>34 </footer>35 </form>36 </mo-questionnaire>37</article>38
Choice cards
1<mo-questionnaire style="max-width: 28rem; margin-inline: auto;">2 <div data-questionnaire-progress></div>3 4 <form data-questionnaire-step data-required data-error="Please select an option.">5 <h3>What should the agent build next?</h3>6 <p>Choose a direction or describe another task.</p>7 <div data-questionnaire-choices>8 <label data-questionnaire-choice>9 <input type="radio" name="direction" value="tool-calls" required>10 <span data-indicator data-type="radio"></span>11 <span data-questionnaire-label>Tool call timeline <small data-questionnaire-description>Show what the agent ran and what came back.</small></span>12 <span data-shortcut>1</span>13 </label>14 <label data-questionnaire-choice>15 <input type="radio" name="direction" value="approvals">16 <span data-indicator data-type="radio"></span>17 <span data-questionnaire-label>Approval checkpoints <small data-questionnaire-description>Ask before sensitive actions.</small></span>18 <span data-shortcut>2</span>19 </label>20 <label data-questionnaire-choice>21 <input type="radio" name="direction" value="handoffs">22 <span data-indicator data-type="radio"></span>23 <span data-questionnaire-label>Sub-agent handoffs <small data-questionnaire-description>Make delegated work easier to follow.</small></span>24 <span data-shortcut>3</span>25 </label>26 </div>27 <div data-questionnaire-error></div>28 <footer>29 <button type="button" class="ghost" data-questionnaire-back>Back</button>30 <button type="submit">Next</button>31 </footer>32 </form>33 34 <form data-questionnaire-step hidden>35 <h3>How should progress be reviewed?</h3>36 <p>Select the verification depth.</p>37 <div data-questionnaire-choices>38 <label data-questionnaire-choice>39 <input type="radio" name="review" value="targeted">40 <span data-indicator data-type="radio"></span>41 <span data-questionnaire-label>Targeted checks</span>42 </label>43 <label data-questionnaire-choice>44 <input type="radio" name="review" value="complete">45 <span data-indicator data-type="radio"></span>46 <span data-questionnaire-label>Complete test suite</span>47 </label>48 <label data-questionnaire-choice>49 <input type="radio" name="review" value="manual">50 <span data-indicator data-type="radio"></span>51 <span data-questionnaire-label>Tests and manual QA</span>52 </label>53 </div>54 <div data-questionnaire-error></div>55 <footer>56 <button type="button" class="ghost" data-questionnaire-back>Back</button>57 <button type="submit">Save workflow</button>58 </footer>59 </form>60</mo-questionnaire>61
Multiple + skip
1<mo-questionnaire style="max-width: 28rem; margin-inline: auto;">2 <div data-questionnaire-progress></div>3 4 <form data-questionnaire-step>5 <h3>What should every progress update include?</h3>6 <p>Select all that apply, or skip this question.</p>7 <div data-questionnaire-choices>8 <label data-questionnaire-choice>9 <input type="checkbox" name="signals" value="progress">10 <span data-indicator data-type="checkbox"></span>11 <span data-questionnaire-label>Progress</span>12 </label>13 <label data-questionnaire-choice>14 <input type="checkbox" name="signals" value="decisions">15 <span data-indicator data-type="checkbox"></span>16 <span data-questionnaire-label>Decisions</span>17 </label>18 <label data-questionnaire-choice>19 <input type="checkbox" name="signals" value="risks">20 <span data-indicator data-type="checkbox"></span>21 <span data-questionnaire-label>Risks</span>22 </label>23 <label data-questionnaire-choice>24 <input type="checkbox" name="signals" value="next-step">25 <span data-indicator data-type="checkbox"></span>26 <span data-questionnaire-label>Next step</span>27 </label>28 </div>29 <div data-questionnaire-error></div>30 <footer>31 <button type="button" class="ghost" data-questionnaire-back>Back</button>32 <button type="button" class="outline" data-questionnaire-skip>Skip</button>33 <button type="submit">Next</button>34 </footer>35 </form>36 37 <form data-questionnaire-step hidden data-required>38 <h3>When should the task be scheduled?</h3>39 <p>Pick the delivery timing.</p>40 <div data-questionnaire-choices>41 <label data-questionnaire-choice>42 <input type="radio" name="timing" value="now" required>43 <span data-indicator data-type="radio"></span>44 <span data-questionnaire-label>Now</span>45 </label>46 <label data-questionnaire-choice>47 <input type="radio" name="timing" value="next-cycle">48 <span data-indicator data-type="radio"></span>49 <span data-questionnaire-label>Next cycle</span>50 </label>51 <label data-questionnaire-choice>52 <input type="radio" name="timing" value="backlog">53 <span data-indicator data-type="radio"></span>54 <span data-questionnaire-label>Backlog</span>55 </label>56 </div>57 <div data-questionnaire-error></div>58 <footer>59 <button type="button" class="ghost" data-questionnaire-back>Back</button>60 <button type="submit">Submit</button>61 </footer>62 </form>63</mo-questionnaire>64
Freeform input
1<mo-questionnaire style="max-width: 28rem; margin-inline: auto;">2 <div data-questionnaire-progress></div>3 4 <form data-questionnaire-step data-required>5 <h3>What should the agent prototype next?</h3>6 <p>Choose a direction or write your own.</p>7 <div data-questionnaire-choices>8 <label data-questionnaire-choice>9 <input type="radio" name="prototype" value="delegation">10 <span data-indicator data-type="radio"></span>11 <span data-questionnaire-label>Delegation <small data-questionnaire-description>Show how work moves to a specialist.</small></span>12 </label>13 <label data-questionnaire-choice>14 <input type="radio" name="prototype" value="questions">15 <span data-indicator data-type="radio"></span>16 <span data-questionnaire-label>Question prompts <small data-questionnaire-description>Show choices while the interface waits.</small></span>17 </label>18 <label data-questionnaire-choice>19 <input type="radio" name="prototype" value="both">20 <span data-indicator data-type="radio"></span>21 <span data-questionnaire-label>Both together</span>22 </label>23 </div>24 <div data-questionnaire-input style="margin-block-start: var(--space-2);">25 <input name="prototype-custom" placeholder="Describe another feature…" aria-label="Another feature" />26 </div>27 <div data-questionnaire-error></div>28 <footer>29 <button type="button" class="ghost" data-questionnaire-back>Back</button>30 <button type="submit">Next</button>31 </footer>32 </form>33 34 <form data-questionnaire-step hidden>35 <h3>Anything else?</h3>36 <p>Leave a note for the reviewer (optional).</p>37 <div data-questionnaire-input>38 <textarea name="notes" rows="3" placeholder="Add context…"></textarea>39 </div>40 <footer>41 <button type="button" class="ghost" data-questionnaire-back>Back</button>42 <button type="button" class="outline" data-questionnaire-skip>Skip</button>43 <button type="submit">Submit</button>44 </footer>45 </form>46</mo-questionnaire>47
Three steps
1<mo-questionnaire style="max-width: 28rem; margin-inline: auto;">2 <div data-questionnaire-progress></div>3 4 <form data-questionnaire-step data-required data-error="Please choose an option.">5 <h3>Where should the agent run?</h3>6 <p>Cloud runs add an environment question to this flow.</p>7 <div data-questionnaire-choices>8 <label data-questionnaire-choice>9 <input type="radio" name="runtime" value="local" required>10 <span data-indicator data-type="radio"></span>11 <span data-questionnaire-label>Local workspace</span>12 </label>13 <label data-questionnaire-choice>14 <input type="radio" name="runtime" value="cloud">15 <span data-indicator data-type="radio"></span>16 <span data-questionnaire-label>Cloud workspace <small data-questionnaire-description>Needs environment selection next.</small></span>17 </label>18 </div>19 <div data-questionnaire-error></div>20 <footer>21 <button type="button" class="ghost" data-questionnaire-back>Back</button>22 <button type="submit">Next</button>23 </footer>24 </form>25 26 <form data-questionnaire-step hidden data-required>27 <h3>Which cloud environment?</h3>28 <p>Only shown after choosing Cloud.</p>29 <div data-questionnaire-choices>30 <label data-questionnaire-choice>31 <input type="radio" name="env" value="preview" required>32 <span data-indicator data-type="radio"></span>33 <span data-questionnaire-label>Preview</span>34 </label>35 <label data-questionnaire-choice>36 <input type="radio" name="env" value="staging">37 <span data-indicator data-type="radio"></span>38 <span data-questionnaire-label>Staging</span>39 </label>40 <label data-questionnaire-choice>41 <input type="radio" name="env" value="isolated">42 <span data-indicator data-type="radio"></span>43 <span data-questionnaire-label>Isolated sandbox</span>44 </label>45 </div>46 <div data-questionnaire-error></div>47 <footer>48 <button type="button" class="ghost" data-questionnaire-back>Back</button>49 <button type="submit">Next</button>50 </footer>51 </form>52 53 <form data-questionnaire-step hidden data-required>54 <h3>When should the agent request approval?</h3>55 <p>Final checkpoint before saving.</p>56 <div data-questionnaire-choices>57 <label data-questionnaire-choice>58 <input type="radio" name="approval" value="writes" required>59 <span data-indicator data-type="radio"></span>60 <span data-questionnaire-label>Before writing files</span>61 </label>62 <label data-questionnaire-choice>63 <input type="radio" name="approval" value="commands">64 <span data-indicator data-type="radio"></span>65 <span data-questionnaire-label>Before running commands</span>66 </label>67 <label data-questionnaire-choice>68 <input type="radio" name="approval" value="sensitive">69 <span data-indicator data-type="radio"></span>70 <span data-questionnaire-label>Only for sensitive actions</span>71 </label>72 </div>73 <div data-questionnaire-input style="margin-block-start: var(--space-3);">74 <textarea name="notes" rows="2" placeholder="Add context for reviewers (optional)"></textarea>75 </div>76 <div data-questionnaire-error></div>77 <footer>78 <button type="button" class="ghost" data-questionnaire-back>Back</button>79 <button type="submit">Save execution plan</button>80 </footer>81 </form>82</mo-questionnaire>83
USAGE
1<mo-questionnaire>2 <div data-questionnaire-progress><!-- Step X of N + progress --></div>3 <form data-questionnaire-step>4 <h3>Title</h3>5 <div data-field><label for="a">A</label><input id="a" name="a" required /></div>6 <footer>7 <button type="button" class="ghost" data-questionnaire-back>Back</button>8 <button type="submit">Continue</button>9 </footer>10 </form>11 <form data-questionnaire-step hidden>…</form>12</mo-questionnaire>
API
NAMEKINDDESCRIPTION
<mo-questionnaire>elementWizard orchestrator over form[data-questionnaire-step] children
[data-questionnaire-step]attributeOne wizard step (a plain form); hidden managed by JS
[data-questionnaire-progress]attributeSlot rendering Step X of N beside a native progress
[data-questionnaire-choices] / [data-questionnaire-choice]attributeChoice list and card; contains hidden input + indicator + label + shortcut
[data-questionnaire-error] / [data-questionnaire-input]attributeError slot and freeform input wrapper
data-start / data-resetattributeOpen on step N · clear and return to step 1 on completion
data-required / data-questionnaire-skipattributeRequire choice selection · skip button for optional steps
mo-questionnaire-completeelementEvent with detail.values (merged FormData); native reportValidity gates each advance
FILES
src/css/questionnaire.csssrc/js/questionnaire.jsInstall:
mo add questionnaireTHEMING · PLAYGROUND
This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.
Global tokens
--accent--background--border--card--foreground--input--muted-foreground--primary--primary-foreground--radius--ringPreview
Your CSS
Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.