Aller au contenu

Composants · Référence

Effect Form

Reusable Effect Form fields, submission state, localized HTTP errors with failure fallbacks, grouping, file inputs, and dirty-navigation blocking.

Dernière mise à jour le 17 octobre 2026

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.

Set the active locale once with KrakstackProvider; pass locale directly only when a component needs an override. Message overrides are keyed by arbitrary locale strings, so additional languages can be supplied with messages={{ es: { ... } }}. Exact locale keys such as es-MX take precedence over base keys such as es; English is the final fallback.

Install

shell
bunx shadcn@latest add @krak-stack/effect-form

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>
Dependencies
Packages and shadcn components required by this registry item.

Dependencies

Registry Dependencies

Preview

Effect Form Fields
Schema-backed fields with Effect Atom submission and validation state.