Conform is a form validation library built on top of the Constraint Validation API.
- Progressive Enhancement: It is designed based on the HTML specification. From validating the form to reporting error messages for each field, if you don't like part of the solution, just replace it with your own.
- Framework Agnostic: The DOM is the only dependency. Conform makes use of native Web APIs exclusively. You don't have to use React / Vue / Svelte to utilise this library.
- Flexible Setup: It can validates fields anywhere in the dom with the help of form attribute. Also enables CSS pseudo-classes like
:valid
and:invalid
, allowing flexible styling across your form without the need to manipulate the class names.
import { useForm, useFieldset } from '@conform-to/react';
export default function LoginForm() {
const formProps = useForm({
onSubmit(event) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const value = Object.fromEntries(formData);
console.log(value);
},
});
const { email, password } = useFieldset(formProps.ref);
return (
<form {...formProps}>
<label>
<div>Email</div>
<input type="email" name="email" required />
<div>{email.error}</div>
</label>
<label>
<div>Password</div>
<input type="password" name="password" required />
<div>{password.error}</div>
</label>
<button type="submit">Login</button>
</form>
);
}
Learn more about conform here
Package | Description | Size |
---|---|---|
@conform-to/react | View adapter for react | |
@conform-to/yup | Schema resolver for yup | |
@conform-to/zod | Schema resolver for zod |