@devlsh/form

@devlsh/form

Lightweight, type-safe forms for Vue.

• Interactive demo.
• Typed field names and values.
• Reactive field values and validation errors.
• Field validation with async-validator rules.
• Async submit callbacks with a loading state.
• Default values, form reset, and manual field errors.

Installation

$ npm install @devlsh/form

Usage

Validate an email field before submission.

<template>
  <form novalidate @submit="submit">
    <label for="email">Email Address</label>
    <input
      id="email"
      name="email"
      type="email"
      autocomplete="email"
      required
      :disabled="loading"
      :aria-invalid="email.hasError"
      :aria-describedby="email.hasError ? 'email-error' : undefined"
      v-model="email.value"
    />

    <p id="email-error" role="alert" v-if="email.hasError">{{ email.error?.message }}</p>

    <button type="submit" :disabled="loading">Submit</button>
  </form>
</template>

<script setup lang="ts">
  import { useForm } from '@devlsh/form';

  interface MyForm {
    email: string;
  }

  const { useField, handle, loading } = useForm<MyForm>({
    defaults: { email: '' },
  });

  const email = useField('email', {
    type: 'email',
    required: true,
  });

  const submit = handle(async (values) => {
    console.log(values.email);
  });
</script>

Contributing

Report bugs through issues or ask questions in Discussions. Report vulnerabilities privately as described in SECURITY.md.

For local development, pull requests, and other contributions, see the Contributing Guidelines.

License

@devlsh/form is free and open-source software licensed under the MIT License.

devlsh.com  ·  GitHub: @devlsh  ·  X: @itsdevlsh