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
})
});