Formite

A minimal and lightweight form library for Qwik

🐤 As tiny as 1 KB in size (gzipped)

🔀 Effortlessly works with your UI component libraries

🛡️ Easy validations with RegExp, Zod and custom functions

🚀 Designed with simplicity and performance in mind

Installation

npm install formite

Login form example

import{component$,useStore}from"@builder.io/qwik";importForm,{ValidationStore}from"formite";exportconstLoginForm=component$(()=>{// a store defining the inputs we need to validate along with their validatorsconstvalidationStore: ValidationStore=useStore({email: {validator: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/,// or z.string().email()},password: {validator: /.{8,}/,},});return(<FormvalidationStore={validationStore}onSubmit$={(formData)=>{/* send form data to server */}}>{/* email */}<div>
Email: <inputname="email"/>{validationStore.email?.status==="invalid"&&(<div>* Invalid email address</div>)}</div>{/* password */}<div>
Password: <inputname="password"type="password"/>{validationStore.password?.status==="invalid"&&(<div>* Password must have at least 8 characters</div>)}</div>{/* submit */}<button>Login</button></Form>);});

Have an issue? Post it here