Introduction

Why NotForm?

notform is a standard-schema based Vue form validator designed to simplify form validation while preserving the natural "Vue way" of doing things. It provides a single composable and renderless components that give you everything needed to validate your forms with confidence.

It also includes an array field component that eliminates the complexity of handling dynamic array fields in your forms.

What Makes NotForm Special?

notform isn't just another form library. It's built with specific principles that make form validation in Vue applications feel natural and intuitive.

Type-Safe from the Ground Up

notform is written in TypeScript and leverages your validation schema to provide complete type safety throughout your forms. Get intelligent autocomplete suggestions, catch errors at compile time, and enjoy a superior developer experience with full IDE support.

Your schema becomes the single source of truth for both runtime validation and compile-time type checking.

Built with Composition API

notform is designed specifically for Vue 3, NotForm embraces the Composition API to give you maximum flexibility and composability. Use the useNotForm composable alongside your other composables for a consistent, modern Vue development experience.

Completely UI Agnostic

notform doesn't impose any styling or UI opinions on your application. Use it with Nuxt UI, ShadcnVue, Vuetify, PrimeVue, or build your own custom components from scratch.

The components are renderless and headless—they manage state and validation logic while giving you complete control over presentation and styling. Your UI library's components work exactly as they should.

Framework Agnostic Validation

notform works with any standard-schema compatible validation library:

• Zod - TypeScript-first schema validation
• Valibot - Modular and type-safe validation
• Yup - Dead simple object schema validation
• ArkType - TypeScript's 1:1 validator
• Any library that implements the standard-schema interface

Define your schema once and let NotForm handle the rest.

Key Features

• Schema-Based Validation: Use Zod, Yup, Valibot, or ArkType for powerful, type-safe validation
• Field-Level Control: Validate on blur, change, submit, or programmatically—you decide
• Array Field Support: Built-in support for dynamic form arrays with add, remove, and nested validation
• Error Management: Automatic error tracking and display with customizable error messages
• Form State: Track dirty, touched, valid, submitting states for better UX
• Async Validation: Support for async validation rules and server-side validation
• Type Safety: Full TypeScript support with inferred types from your schema
• Accessible: Built with accessibility in mind for inclusive form experiences

Quick Example

Here's how simple it is to create a validated form with NotForm:

<script setup lang="ts">
import { useNotForm, NotForm, NotField, NotMessage } from 'notform'
import { z } from 'zod'

const { state, id, submit } = useNotForm({
  schema: z.object({
    email: z.string().email('Please enter a valid email'),
    password: z.string().min(8, 'Password must be at least 8 characters')
  }),
  onSubmit: async (data) => {
    // Your custom submission logic here
    console.log('Validated data:', data)
  }
})
</script>

<template>
  <NotForm :id="id" @submit="submit">
    <NotField name="email" v-slot="{ methods, name }">
        <label :for="name">
          Email
          <input
            v-model="state.email"
            type="email"
            :id="name"
            :name="name"
            v-bind="methods"
          />
          <NotMessage :name="name" />
        </label>
    </NotField>

    <NotField name="password" v-slot="{ methods, name }">
        <label :for="name">
          Password
          <input
            v-model="state.password"
            type="password"
            :id="name"
            :name="name"
            v-bind="methods"
          />
          <NotMessage :name="name" />
        </label>
    </NotField>

    <button type="submit">Submit</button>
  </NotForm>
</template>

What's Next?

Ready to get started? Head over to the Installation guide to add NotForm to your project, or explore the API Reference to see everything NotForm can do.