@duplojs/formJust great VueJS forms.

Build complex forms without friction, fully type-safe.

import { useMultiLayout
, useRepeatLayout
 } from "@duplojs/form/vue";
import * as DP
 from "@duplojs/utils/dataParser";

import { templatesGrid
, useForm
, useNumberInput
, useTextInput
 } from "./form";

export function useMyCustomForm
() {
	const { component
, check
, currentValue
, reset
 } = useForm
(
		useRepeatLayout
(
			useMultiLayout
({
				name
: useTextInput
({
					label
: "Name",
					defaultValue
: "Math",
					template
: templatesGrid

						.useInputTemplate
({ columns
: 6 }),
				}),
				age
: useNumberInput
({
					label
: "Age",
					defaultValue
: 16,
					dataParser
: DP
.number
()
						.addChecker
(
							DP
.checkerNumberMin
(18, { errorMessage
: "Too young !" }),
						),
					template
: templatesGrid

						.useInputTemplate
({ columns
: 6 }),
				}),
			}),
			{
				min
: 2,
				max
: 10,
			},
		),
	);

	return {
		TheForm
: component
,
		checkForm
: check
,
		currentFormValue
: currentValue
,
		resetForm
: reset
,
	};
}

✨

100% customizable

Use your own inputs, create your own templates, and customize every detail of your forms.

🔗

Fully typed

Current value, checked value, and insertion slots are typed all the way through.

🗿

Complete error system

Each field can have its own detailed error message, automatically managed by the form structure. Rendering stays fully customizable.

😎

Highly performant

Optimized with cache systems to avoid rebuilding unnecessary DOM.

☁️

Very lightweight

Very few functions and very little code, with tree-shaking available when needed.

🤩

Default inputs and templates

Nothing is better for prototyping than having all the components already provided by default.

🤙

Easy to learn

Nest your layouts and the rest follows automatically: current value, output value, and error management.

🧱

DuploJS standards

A library built on strong foundations to create custom forms adapted to all your needs.