Saltearse al contenido
5Form

Built-in forms

Esta página aún no está disponible en tu idioma.

This aditional package provides a set of built-in forms that can be used in your application.

Installation

pnpm add @faivform/builtin

Available forms

There are currently 3 forms available:

Usage

You can import the forms from the package and use them in your application. For example:

<script>
  import { Login } from "@faivform/builtin";
</script>


<Login />

Login

The login form is used to authenticate a user in your application.

<script>
  import { Login } from "@faivform/builtin";


  const submit = async (data) => {
    // Do something with the data
  };


  const texts = {
    title: "Login",
    email: {
      label: "Email",
      placeholder: "example@email.com",
    },
    password: {
      label: "Password",
      placeholder: "********",
    },
    submit: "Login",
    forgotPassword: "Forgot password?",
    register: "Register",
  };
</script>


<Login {submit} {texts} />

Register

The register form is used to create a new user in your application.

<script>
  import { Register } from "@faivform/builtin";


  const submit = async (data) => {
    // Do something with the data
  };


  const texts = {
    title: "Register",
    name: {
      label: "Name",
      placeholder: "John Doe",
    },
    email: {
      label: "Email",
      placeholder: "example@email.com",
    },
    password: {
      label: "Password",
      placeholder: "********",
    },
    submit: "Register",
    login: "Login",
  };
</script>


<Register {submit} {texts} />

Forgot password

The forgot password form is used to request a password reset for a user in your application.

<script>
  import { ForgotPassword } from "@faivform/builtin";


  const submit = async (data) => {
    // Do something with the data
  };


  const texts = {
    title: "Forgot password",
    email: {
      label: "Email",
      placeholder: "example@email.com",
    },
    submit: "Send reset link",
    login: "Login",
  };
</script>


<ForgotPassword {submit} {texts} />