Example

Edit is a Form.make result, as in the foldkit-form README.

import { Bundle } from 'foldkit-bundle'
import { Style } from 'foldkit-mixins'
import { FieldSlots, FormSlots, FormView, type FieldInput } from 'foldkit-mixins-form'

const Field = FormView.field(Edit).pipe(
  Style.attach(
    Style.forSlots(FieldSlots)({
      root: Style.class('field'),
      text: Style.whenInput<FieldInput>(input => input.invalid, Style.class('is-invalid')),
    }),
  ),
)

const View = FormView.define(Edit, { field: Field }).pipe(
  Style.attach(Style.forSlots(FormSlots)({ root: Style.class('form') })),
)

// The form's own Bundle, given a view. Place this one instead of `Edit.bundle`.
const Drawn = Edit.bundle.pipe(Bundle.withView(FormView.submodel(Edit, View)))

In the following integration fragment, EditForm is the placement of Drawn, model and h are the parent view arguments, and authors is the loaded picker data. Where the parent draws the placement:

EditForm.view(model, h, {
  options: { editorId: authors.map(author => ({ value: author.id, label: author.name })) },
  words: { submit: 'Save' },
})

• FormView.define(Edit) alone is a complete, unstyled form. field is only for changing how fields are drawn.
• submits: false draws the form without its submit button, for someone who may not submit it (a writer, where the submit publishes).
• locked: ['ownerId'] draws those keys disabled: shown, not editable, for a key the person may not set (foldkit-guard's May.canSet says which). It is a hint; the server checks the write. A key in a nested row is not locked by it, and a Bundle-backed key draws as its Bundle does. A disabled control is left out of a form post, so a locked key's value is also drawn as a hidden input: a form posted with scripts off still sends it.
• options is keyed by the form's keys and is where a relation picker's choices come from. The form names the target Entity; listing it is a query you make, so the choices are yours to load, filter, and label.
• A Hidden control is not drawn.