Getting Started

Installation

To add @zluvo/forms to your project, execute the following command in your terminal:

npm install @zluvo/forms

Import form and fields

It's time to dive into creating your first form! For better organization, consider placing each form in its own file. Import the form and field modules from @zluvo/forms:

import { form, field } from '@zluvo/forms';

Configure Fields in the Form

Let's walk through creating a registration form named registerForm. Start by defining a couple of fields, username and password. For instance, username can be a text field, and password can be a password field. Initialize each field and add the necessary attributes, such as label and placeholder:

import { form, field } from '@zluvo/forms';

export const registerForm = form.create('Register Now', {
	username: field.text({
		label: 'Username',
		placeholder: 'Your Username'
	}),
	password: field.password({
		label: 'Password',
		placeholder: 'Your Password'
	})
});

To enhance this further, you can provide default values and make each field required:

import { form, field } from '@zluvo/forms';

export const registerForm = form.create('Register Now', {
	username: field.text({
		label: 'Username',
		placeholder: 'Your Username',
		required: true
	}),
	password: field.password({
		label: 'Password',
		placeholder: 'Your Password',
		value: 'really-great-password',
		required: true
	})
});