Workshop Kit · widget reference
Shippedtext-input
The Method's workhorse capture primitive. A single-line or multiline prose input that autosaves to MuntinContext on change, announces the save via a polite live region, and writes to any context key the lesson author names. Twelve of the sixteen bootcamp lessons use it.
Live demo
Two variants below — single-line for short captures (a name, a phone), multiline for paragraphs and lists. Both autosave; both round-trip through MuntinContext. Type anything; reload the page; your value comes back.
Single-line · data-context-key="demoSingle"
Multiline · data-context-key="demoMulti" data-multiline="true"
Contract
Drop a <section class="course-widget" data-widget="text-input"> into a lesson and configure via data attributes. The widget engine (/assets/js/workshop-widget.js) discovers, hydrates from saved state, mounts, and commits.
| Attribute | Type | Purpose |
|---|---|---|
data-widgetRequired |
literal | Always "text-input". Tells the engine which renderer module to dynamic-import. |
data-context-keyRequired |
string · dotted | Where the captured value lands in MuntinContext. Supports nested keys like restaurantProfile.name (the path-walking write goes through the engine's commit). |
data-labelRequired |
string | Visible label rendered above the input. Use data-label-es for the Spanish copy on the same widget instance (the engine picks based on <html lang> or data-locale). |
data-help |
string | One-line helper text below the label. data-help-es for ES. |
data-placeholder |
string | Input placeholder. data-placeholder-es for ES. |
data-max |
number | Character cap. The counter in the meta row turns warning-colored as the operator approaches it; the input enforces hard at maxlength. |
data-multiline |
boolean | Set to "true" for a textarea; default is a single-line input. |
What it writes: the value lands at the context key you named, debounced 250ms. The engine's commit path serializes into localStorage['mtn:context'] and broadcasts a mtn:context-change event for any subscriber (the rail, the readiness checklist on L14, the live preview).
Markup
Where it ships
- L1 — Welcome (captures name, cuisine, address via three instances)m1-orient/welcome
- L3 — Your one promisem1-orient/one-promise
- L4 — Your customer in one paragraphm2-decide/customer
- L5a — Naming + domainm2-decide/fresh/naming
- L5b — Audit your current sitem2-decide/rebuild/audit
- L10 — Hours, holidays, contact (captures phone)m3-assemble/hours-contact
- L12 — Local SEO anchors (eight keyword phrases)m4-launch/local-seo
- L13 — Reviews + first-week trust (response template)m4-launch/reviews
- L16 — The 30-day rhythm (committed cadence)m4-launch/rhythm
Plus L6a, L6b, L7, L9a, L9b, L11a, L11b for various supporting captures — twelve lessons total.
Source
/tools/_shared/workshop/text-input.js — ~120 LOC. Exports { tag, contextKeys, mount, serialize } per the Workshop Kit widget contract. Reads data-context-key, looks up nested values via dotted-path walk, autosaves on input with 250ms debounce, announces via role="status" aria-live="polite".
The engine (/assets/js/workshop-widget.js) discovers every .course-widget[data-widget="text-input"] on a page, dynamic-imports the module, calls mount() with the discovered root + the current state slice. Hot-reload friendly (returns an unmount).