Krakstack Registry

Overview

effect-form provides reusable field components for @lucas-barake/effect-form-react. It includes schema-backed fields, submission errors and state, grouped fields, revert actions, and form-owned dirty-navigation blocking. Built-in English and French labels can be read or overridden with effectFormMessages.

Available Fields

TextField and NameField — string inputs, with a standard localized name variant
TextAreaField, DescriptionField, and NullableTextAreaField — required and nullable multiline values
CheckboxField — boolean values
SelectField and FolderField — single string selection
MultiSelectField and NullableMultiSelectField — array and nullable array selection
SearchableSelectField and SingleSearchableSelectField — virtualized searchable multiple and single selection
KeyValueField and NullableKeyValueField — record editors
FileField — clearable native File values through the shared FilePicker
ImageField — local file and persisted URL image values with previews
RevertButton — restores a string field to its original value

Form Helpers

FieldWrapper groups related fields with a legend and optional locale badge
SubmitButton observes dirty, changed-since-submit, and waiting state
SubmitError and ErrorMessage present typed failures
BlockNavigation observes the form and guards unsaved navigation

Usage

tsx

const builder = FormBuilder.empty.addField("name", Schema.String);

const form = FormReact.make(builder, {
  fields: { name: TextField },
  onSubmit: (_, { decoded }) => save(decoded),
});

<form.Initialize defaultValues={{ name: "" }}>
  <form.name label="Name" />
  <SubmitError result={submitResult} />
  <SubmitButton form={form} />
  <BlockNavigation form={form} />
</form.Initialize>

Effect Form

Overview

Available Fields

Form Helpers

Usage

Dependencies

Registry Dependencies

Preview