Basic Form

In this page, you will learn how to create a form by using Ez Form. We will start with a very popular form: Sign In.

Create Form

Firstly, we need to add an interface for our form. A Sign In form should have the following properties:

export interface SignInFormValues {
	username: string; // Or email: string;
	password: string;
}

Next, we need to create a form component. We can use useForm to create a form with the following properties:

import { useForm } from "@ez-kits/form-react";

export interface SignInFormValues {
	username: string; // Or email: string;
	password: string;
}

export function SignInForm() {
	const signInForm = useForm<SignInFormValues>({
		// form options go here
	});
	
	return <signInForm.Form>
		<form {...signInForm.getFormProps()}>
			{/* form fields */}
		</form>
	</signInForm.Form>
}

Now, our form is ready. Let's add fields to our form.

Adding Fields

FormInstance includes a Field component. We can use this component to add fields to our form.

import { useForm, BindingFieldInput } from "@ez-kits/form-react";

export interface SignInFormValues {
	username: string; // Or email: string;
	password: string;
}

export function SignInForm() {
	const signInForm = useForm<SignInFormValues>({
		// form options go here
	});

	return <signInForm.Form>
		<form {...signInForm.getFormProps()}>
			<signInForm.Field name="username">
				<label>
					Username:
					<BindingFieldInput>
						<input />
					</BindingFieldInput>
				</label>
			</signInForm.Field>
			<signInForm.Field name="password">
				<label>
					Password:
					<BindingFieldInput>
						<input type="password" />
					</BindingFieldInput>
				</label>
			</signInForm.Field>
		</form>
	</signInForm.Form>
}

Submitting the form

FormInstance includes a submit method. We can use this method to submit the form. Or you can use button type submit to submit the form.

To retrieve the form values after submitting, we can listen to the onSubmit event.

import { useForm, BindingFieldInput } from "@ez-kits/form-react";

export interface SignInFormValues {
	username: string; // Or email: string;
	password: string;
}

export function SignInForm() {
	const signInForm = useForm<SignInFormValues>({
		onSubmit(values) {
			console.log(values);
		}
	});

	return <signInForm.Form>
		<form {...signInForm.getFormProps()}>
			<signInForm.Field name="username">
				<label>
					Username:
					<BindingFieldInput>
						<input />
					</BindingFieldInput>
				</label>
			</signInForm.Field>
			<signInForm.Field name="password">
				<label>
					Password:
					<BindingFieldInput>
						<input type="password" />
					</BindingFieldInput>
				</label>
			</signInForm.Field>
			<button type="submit">
				Submit
			</button>
		</form>
	</signInForm.Form>
}

Demo

This is final result. Fill in the form and submit. Then, the console will show the form values.

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Open Sandbox