Form nativelite

Collects its fields by name and fires submit with their values once every check passes (a submit Button or Enter submits).

Children: many

Preview

Loading the renderer…

namerequired

disabled

busy

summary

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Form",
          "name": "profile",
          "children": [
            "c0-title",
            "c0-notify",
            "c0-save"
          ]
        },
        {
          "id": "c0-title",
          "component": "Input",
          "label": "Title",
          "name": "title",
          "placeholder": "What changed?"
        },
        {
          "id": "c0-notify",
          "component": "Switch",
          "label": "Notify watchers",
          "name": "notify",
          "checked": true
        },
        {
          "id": "c0-save",
          "component": "Button",
          "label": "Save",
          "submit": true
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Form rendered by the React renderer on Web — **Web** React

Form rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Form rendered by the Compose renderer on Android — **Android** Compose

Form rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-form, painted by each native renderer.

Variants

disabled

busy

summary

Props

Prop	Type	Default	Description
`name`required	`string`	–	The form's key in the submit payload.
`disabled`bind	`boolean`	`false`	Makes every field inert.
`busy`bind	`boolean`	`false`	Shows the submit pending and refuses another submit.
`summary`	`boolean`	`false`	Also lists every failed check above the fields.

Events and slots

Name	Kind
`on.submit`	event: runs an action
`on.invalid`	event: runs an action
`on.change`	event: runs an action

Accessibility

Role: form
Semantics: form

Keys	Action
`Enter in a single-line field`	submit
–	A failed submit focuses the first invalid field and announces `invalidFields`

Theming

Recipe parts: Form/rootForm/summary
Keyed by: disabledbusy:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme