@arckit/form

TanStack Form integration with DaisyUI field components and form utilities.

Table of Contents

• About
• Installation
• Usage
• API
• Contributing
• License

Pre-built form fields and utilities for TanStack Form using @arckit/daisyui components. Includes Input, Textarea, Checkbox, ComboBox, SelectedItems, Label, ErrorMessage, Counter, and Submit.

Optionally integrates with Effect Schema for validation via applyEffectSchema.

pnpm add @arckit/form @arckit/daisyui @tanstack/react-form

For Effect Schema validation:

pnpm add effect

import { useAppForm, handleSubmit, handleAction } from '@arckit/form';

const MyForm = ({ onSubmit }) => {
  const form = useAppForm({
    defaultValues: { name: '', email: '' },
    onSubmit: handleAction(onSubmit)
  });

  return (
    <form onSubmit={handleSubmit(form)}>
      <form.AppField name='name'>
        {(field) => (
          <>
            <field.Label>Name</field.Label>
            <field.Input isPending={false} />
            <field.Error />
          </>
        )}
      </form.AppField>
      <form.AppForm>
        {(form) => <form.Submit isPending={false}>Send</form.Submit>}
      </form.AppForm>
    </form>
  );
};

Effect Schema validation

import { applyEffectSchema } from '@arckit/form';
import { Schema } from 'effect';

const validation = Schema.Struct({
  name: Schema.NonEmptyString,
  email: Schema.NonEmptyString
});

const form = useAppForm({
  defaultValues: { name: '', email: '' },
  validators: { onBlur: applyEffectSchema(validation) }
});

Fields

| Component | Description | |-----------|-------------| | Input | Text input field with error state | | Textarea | Textarea field with error state | | Checkbox | Checkbox with label | | ComboBox | Autocomplete combobox with single/multi selection | | SelectedItems | Display and remove selected items | | Label | Form label linked to field | | ErrorMessage | Field error messages with i18n support | | Counter | Character counter |

Form Components

| Component | Description | |-----------|-------------| | Submit | Submit button with loading state |

Utilities

| Function | Description | |----------|-------------| | useAppForm | TanStack Form hook with pre-registered field components | | handleSubmit | Form submit handler with preventDefault | | handleAction | Server action handler with startTransition | | applyEffectSchema | Effect Schema validator adapter | | fieldErrorTranslation | Error message i18n key builder |

See CONTRIBUTING.md for details.

MIT © Marc Gavanier