Registration form
A richer form exercising every input type — text, select, radio group, multi-select, switch and date — with required-field validation gating the submit.
[ { "createSurface": { "surfaceId": "main", "catalogId": "urn:flab-ui:a2ui:catalog:v1" }, "version": "v1.0" }, { "updateComponents": { "surfaceId": "main", "components": [ { "id": "root", "component": "Card", "child": "col" }, { "id": "col", "component": "Column", "children": [ "title", "name", "country", "plan", "interests", "notify", "starts", "submit" ] }, { "id": "title", "component": "Text", "text": "Create your account", "variant": "title" }, { "id": "name", "component": "TextField", "label": "Full name", "value": { "path": "/form/name" }, "checks": [ { "call": "required", "args": { "value": { "path": "/form/name" } }, "message": "Name is required." } ] }, { "id": "country", "component": "Select", "label": "Country", "value": { "path": "/form/country" }, "options": [ { "label": "Norway", "value": "no" }, { "label": "United Kingdom", "value": "uk" }, { "label": "United States", "value": "us" } ] }, { "id": "plan", "component": "Radio", "label": "Plan", "value": { "path": "/form/plan" }, "options": [ { "label": "Free", "value": "free" }, { "label": "Pro", "value": "pro" }, { "label": "Enterprise", "value": "ent" } ] }, { "id": "interests", "component": "MultiSelect", "label": "Interests", "placeholder": "Pick a few", "value": { "path": "/form/interests" }, "options": [ { "label": "Design systems", "value": "ds" }, { "label": "Agents", "value": "agents" }, { "label": "Accessibility", "value": "a11y" } ] }, { "id": "notify", "component": "Switch", "label": "Email me product updates", "value": { "path": "/form/notify" } }, { "id": "starts", "component": "DateSelect", "placeholder": "Start date", "value": { "path": "/form/starts" } }, { "id": "submit_label", "component": "Text", "text": "Create account" }, { "id": "submit", "component": "Button", "variant": "primary", "child": "submit_label", "action": { "event": { "name": "register", "context": { "name": { "path": "/form/name" }, "country": { "path": "/form/country" }, "plan": { "path": "/form/plan" }, "interests": { "path": "/form/interests" }, "notify": { "path": "/form/notify" } } } }, "checks": [ { "call": "required", "args": { "value": { "path": "/form/name" } }, "message": "Name is required." } ] } ] }, "version": "v1.0" }, { "updateDataModel": { "surfaceId": "main", "value": { "form": { "name": "", "country": "no", "plan": "pro", "interests": [], "notify": true } } }, "version": "v1.0" }]Rendered with Flab components
Create your account
Name is required.