Skip to content

Built-in forms

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} />