sveltik

• Purpose: Sveltik is a form library for Svelte, inspired by Formik. It provides components and utilities to manage form state, validation, and submission in Svelte applications.

• Key Features:

  • Form state management (values, errors, touched fields)
  • Validation (sync only)
  • Form submission handling
  • Field-level warnings
  • Submission success/failure tracking
  • Auto-scrolling to first error

• Main Components:

  • <Sveltik>: Core form wrapper that manages form state and lifecycle
  • <Field>: Automatically connects inputs to Sveltik state
  • <Form>: Wrapper around HTML <form> that hooks into Sveltik handlers
  • <ErrorMessage>: Displays field error messages
  • <ScrollMarker>: Marks scroll positions for error navigation

• Target Audience: Svelte developers looking for a Formik-like solution for form management.

• Framework Support: Exclusively for Svelte.

• Notable Differences from Formik:

  • Synchronous validation only
  • Additional warning state support
  • Enhanced submission tracking (attempts, successes, failures)
  • Different prop naming conventions
  • No support for nested field paths
  • No Yup integration

• Example Usage:

<Sveltik initialValues={{email: ''}} onSubmit={...}>
  <Form>
    <Field name="email" type="email" />
    <ErrorMessage name="email" />
    <button type="submit">Submit</button>
  </Form>
</Sveltik>

For more details, see the [Formik documentation](https://jaredpalmer.com/formik/ ↗) which inspired this library.