SusForm

Form shell — title, field slot, validation summary, submit / cancel, loading overlay via SusFormController.

Package

SusKit · Molecules (commercial)

SusKit · Molecules

Props

Name	Type	Default
`Controller`	`Prop<SusFormController>`	`new()`	v-model
`Title`	`Prop<string>`	`""`	v-model
`SubmitLabel`	`Prop<string>`	`"OK"`	v-model

Slots

Name
`(default)`

Events

No public events.

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

sus-form
sus-form__actions
sus-form__body
sus-form__cancel
sus-form__error-item
sus-form__errors
sus-form__errors-title
sus-form__spinner
sus-form__submit
sus-form__title
sus-form--dirty
sus-form--disabled
sus-form--invalid
sus-form--readonly
sus-form--submitting

Usage

Drive lifecycle through Controller: submit → IsSubmitting until FinishSubmit / FailSubmit / SetServerErrors.

csharp

var ctrl = new SusFormController();
ctrl.OnSubmit += values =>
{
    // async work…
    ctrl.FinishSubmit();
    // or ctrl.SetServerErrors(new Dictionary<string, string> { ["name"] = "Taken" });
    // or ctrl.FailSubmit();
};

var form = new SusForm();
form.Controller.Value = ctrl;
form.Title.Value = "Quick form";
form.SubmitLabel.Value = "OK";

var nameField = new SusFormField();
nameField.Label.Value = "Name";
nameField.FieldName.Value = "name";
nameField.Required.Value = true;
var input = new SusTextfield();
input.Placeholder.Value = "Hero name";
input.Model.Changed += (_, val) => nameField.Model.Value = val;
nameField.Add(input);
form.Add(nameField);

xml

<template>
  <sus:SusForm Title="Quick form"
               SubmitLabel="OK"
               :Controller="FormCtrl.Value">
    <!-- Prefer composing fields in C# (Controller + FormField.Model sync) — see above. -->
  </sus:SusForm>
</template>

<script>
public Prop<SusFormController> FormCtrl = new(new());
</script>

Notes

Pair with SusFormField children (auto-register into the controller).
Keep each field’s Model in sync with its input (see FormField).
ShowCancel (field) toggles the Cancel button; OnCancel fires when pressed.
While submitting, the form shows a spinner overlay and disables the submit button.

SusForm ​