Add example with validation

examples/react/src/fields.tsx

@@ -1,9 +1,27 @@
 import {useFormInstance, useFormField} from '@formulier/react'
 import * as React from 'react'
 
-export function TextField({name, label, info = null}: {name: string; info?: string | null; label: string}) {
+export function TextField({
+	name,
+	label,
+	info = null,
+	required = false,
+}: {
+	name: string
+	info?: string | null
+	label: string
+	required?: boolean
+}) {
+	const validate = React.useCallback(
+		(value: unknown): string | null => {
+			if (required && !value) return 'This field is required'
+			return null
+		},
+		[required],
+	)
+
 	const form = useFormInstance()
-	const [field, meta] = useFormField(form, {name})
+	const [field, meta] = useFormField(form, {name, validate})
 
 	const {id, value, onChange, onBlur} = field
 	const {error} = meta
@@ -19,6 +37,7 @@ export function TextField({name, label, info = null}: {name: string; info?: stri
 				onBlur={onBlur}
 				aria-describedby={!error ? `${id}-info` : `${id}-info ${id}-error`}
 				aria-invalid={!!error}
+				aria-required={required ? true : undefined}
 			/>
 		</Field>
 	)

examples/react/src/forms/validation-form.tsx

@@ -0,0 +1,41 @@
+import {FormProvider, useCreateForm, useSubmitHandler} from '@formulier/react'
+import * as React from 'react'
+import * as Field from '../fields'
+
+interface FormState {
+	firstName: string
+	lastName: string
+	age: number
+}
+
+export function ValidationForm() {
+	const form = useCreateForm<FormState>({
+		initialValues: {
+			firstName: 'John',
+			lastName: null,
+			age: 20,
+		},
+	})
+
+	const onSubmit = useSubmitHandler(form, values => {
+		alert(JSON.stringify(values, null, 2))
+	})
+
+	return (
+		<div>
+			<h1>PersonForm</h1>
+
+			<form onSubmit={onSubmit}>
+				<FormProvider form={form}>
+					<div className="column">
+						<Field.TextField name="firstName" label="First name" required />
+						<Field.TextField name="lastName" label="Last name" info="Some extra info about this field" required />
+						<Field.IntegerField name="age" label="Age" />
+
+						<button type="submit">Submit</button>
+					</div>
+				</FormProvider>
+			</form>
+		</div>
+	)
+}

examples/react/src/main.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import {createRoot} from 'react-dom/client'
 import {createBrowserRouter, RouterProvider, NavLink, Outlet, Navigate, RouteObject} from 'react-router-dom'
 import {PersonForm} from './forms/person-form'
+import {ValidationForm} from './forms/validation-form'
 import {SwitchFieldTypeForm} from './forms/switch-field-type-form'
 import {CheckboxForm} from './forms/checkbox-form'
 import {SelectForm} from './forms/select-form'
@@ -13,6 +14,7 @@ createRoot(document.querySelector('#root')!).render(<App />)
 
 const formRoutes: RouteObject[] = [
 	{path: 'person-form', element: <PersonForm />},
+	{path: 'validation-form', element: <ValidationForm />},
 	{path: 'switch-field-type-form', element: <SwitchFieldTypeForm />},
 	{path: 'checkbox-form', element: <CheckboxForm />},
 	{path: 'select-form', element: <SelectForm />},