The rendered form element wrapped in a context provider.
This component handles form submission, data parsing, validation, and error reporting. It automatically manages the form's submission state (pending/submitted) via a global atom family.
Key features:
schema on submit.onSubmit handler receives strongly-typed data inferred from the schema.isPending, isSubmitted) which can be accessed via useFormStatus.RadioNodeList and checkbox groups into arrays or single values.import { object, string, email } from 'valibot';
import { Form } from '@packages/werkbank/component/form';
const schema = object({
email: string([email()]),
password: string(),
});
function LoginForm() {
return (
<Form
schema={schema}
onSubmit={(data) => {
// data is typed as { email: string; password: string }
console.log(data);
}}
>
<input name="email" type="email" />
<input name="password" type="password" />
<button type="submit">Login</button>
</Form>
);
}
A type-safe Form component that integrates with Valibot for schema validation.