react_boost_forms_quickstart_with_yup_validation.ts

1import React from 'react';
2import { useForm, Form, Field } from 'boost-forms';
3import * as Yup from 'yup';
4
5// Define the shape of the form data
6interface MyFormData {
7  username: string;
8  email: string;
9}
10
11// Define the validation schema using Yup
12const validationSchema = Yup.object().shape({
13  username: Yup.string().required('Username is required'),
14  email: Yup.string().email('Invalid email').required('Email is required'),
15});
16
17const QuickstartForm: React.FC = () => {
18  const form = useForm<MyFormData>({
19    initialValues: {
20      username: '',
21      email: '',
22    },
23    validationSchema,
24    onSubmit: (values) => {
25      console.log('Form Submitted:', values);
26    },
27  });
28
29  return (
30    <Form form={form}>
31      <div>
32        <label htmlFor="username">Username</label>
33        <Field name="username">
34          {({ field, meta }) => (
35            <div>
36              <input {...field} id="username" type="text" />
37              {meta.touched && meta.error && <span style={{ color: 'red' }}>{meta.error}</span>}
38            </div>
39          )}
40        </Field>
41      </div>
42
43      <div>
44        <label htmlFor="email">Email</label>
45        <Field name="email">
46          {({ field, meta }) => (
47            <div>
48              <input {...field} id="email" type="email" />
49              {meta.touched && meta.error && <span style={{ color: 'red' }}>{meta.error}</span>}
50            </div>
51          )}
52        </Field>
53      </div>
54
55      <button type="submit" disabled={form.isSubmitting}>
56        Submit
57      </button>
58    </Form>
59  );
60};
61
62export default QuickstartForm;