Form
Kaioken's Form
API provides a simple yet powerful way to handle form state and validation.
Inspired by TanStack Form, it offers a declarative approach to form management, making it easy to manage form state, validation, and submission.
Example
import { useForm } from "kaioken/form"
const App = () => {
const form = useForm({
initialValues: {
username: "",
},
onSubmit: ({ state }) => {
console.log("form submitted", state)
},
})
const handleSubmit = useCallback((e: Event) => {
e.preventDefault()
form.handleSubmit()
}, [])
return (
<form onsubmit={handleSubmit}>
<div>
<form.Field
name="username"
validators={{
onChange: (value) => !value && "Username is required",
}}
children={(field) => (
<div>
<label htmlFor={field.name}>Username</label>
<input
id={field.name}
name={field.name}
value={field.state.value}
onblur={field.handleBlur}
onchange={(e) => field.handleChange(e.target.value)}
/>
{field.state.errors.length && <span>{field.state.errors.join(", ")}</span>}
</div>
)}
/>
</div>
</form>
)
}