SusFormField

Labeled field wrapper — required / rules / error text around an input child.

Package

SusKit · Molecules (commercial)

SusKit · Molecules

Props

Name	Type	Default
`Label`	`Prop<string>`	`""`	v-model
`FieldName`	`Prop<string>`	`""`	v-model
`ErrorProp`	`Prop<string>`	`""`	v-model
`Required`	`Prop<bool>`	`false`	v-model
`RequiredMessage`	`Prop<string>`	`"This field is required"`	v-model
`Disabled`	`Prop<bool>`	`false`	v-model
`Model`	`Prop<object>`	`null`	v-model
`Row`	`Prop<bool>`	`false`	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-field
sus-form-field__error
sus-form-field__label
sus-form-field--dirty
sus-form-field--disabled
sus-form-field--error
sus-form-field--required
sus-form-field--row

Usage

xml

<template>
  <sus:SusFormField Label="Hero name"
                    FieldName="name"
                    :Required="Required.Value"
                    RequiredMessage="Enter a name"
                    :ErrorProp="Error.Value"
                    :Model="Value.Value"
                    :Disabled="Disabled.Value">
    <sus:SusTextfield Placeholder="Type a name"
                      Variant="outlined"
                      :Model="Value.Value"
                      @change="OnChange" />
  </sus:SusFormField>
</template>

<script>
public Prop<string> Value = new("");
public Prop<string> Error = new("");
public Prop<bool> Required = new(true);
public Prop<bool> Disabled = new(false);
void OnChange(string value) { Value.Value = value; }
</script>

csharp

var field = new SusFormField();
field.Label.Value = "Hero name";
field.FieldName.Value = "name";
field.Required.Value = true;
field.RequiredMessage.Value = "Enter a name";
field.Rules.Value = new List<Func<object, string>>
{
    v =>
    {
        var s = v as string;
        if (string.IsNullOrWhiteSpace(s)) return "Enter a name";
        if (s.Length < 2) return "At least 2 characters";
        return null;
    },
};

var input = new SusTextfield();
input.Placeholder.Value = "Type a name";
input.Variant.Value = "outlined";
input.Model.Changed += (_, val) => field.Model.Value = val;
field.Add(input);

Notes

Nest under SusForm so the controller collects / validates by FieldName (falls back to Label).
SetError(string) injects a server-side message (bypasses local rules).
Keep the input’s model and FormField.Model in sync for validation.

SusFormField ​