1 viewer
Back to Components
Component · Input

Form

Submission boundary that can call CRE8 runtime connections.

Category
Input
Slots
6
States
3
Writer
Shared
cre8.primitive.form

Preview

Live renderShared SSR + WASM writers
<Form connection="Account.Create" method="POST">
  <Input default="Alpha Operator" label="Account Label" name="name" />
  <Select
    label="Account Kind"
    name="kind"
    options={["Operator", "Agent", "Validator"]}
  />
  <Button intent="primary" label="Provision Account" type="submit" />
</Form>

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.primitive-form
header.primitive-form__header
title.primitive-form__title
fields.primitive-form__fields
actions.primitive-form__actions
result.primitive-form__result
6 rows
Modifier
primitive-form--{state}
State attribute
data-statefrom the state prop
Hydration markers
data-cre8-form, data-cre8-form-result

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
submittingsubmittederror
Platforms
webruntime-node
Recipes
unstyledruntime-console

Renderers

Shared writer
Form renders through the one writer the server and the WASM DOM share, so both emit the same markup.

Every tag in the example above renders through a shared writer.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
runtime-nodeview-nodeready
ssrhtml-form-controlready
terminalterminal-form-controlplanned
4 rows

Accessibility

Submission state, error feedback, and connection results remain readable without depending on recipe styling.

  • Connection-driven forms expose busy, success, and error state through native form and live-region semantics.
  • Result payloads stay discoverable as plain structured content after submission.