Getting Started
Quick Start
A complete, minimal Prism form in under two minutes.
This page builds one real, working form: a name and email field, Zod validation, and a submit handler. Every API used here is a real export, nothing is simplified for the example.
1. Define a field component
A field component accepts Prism's normalized field binding plus whatever extra props it
declares. This one wraps a plain native <input>:
import type { FieldComponentProps } from '@prismrepo/forms';
export function TextField({
field,
label,
}: FieldComponentProps<string, { readonly label: string }>) {
return (
<label>
{label}
<input
value={field.value ?? ''}
onChange={(e) => field.onChange(e.target.value)}
onBlur={field.onBlur}
aria-invalid={field.error !== undefined}
/>
{field.error ? <span role="alert">{field.error}</span> : null}
</label>
);
}2. Register it
import { defineRegistry } from '@prismrepo/forms';
import { TextField } from './fields';
export const registry = defineRegistry({
text: TextField,
});3. Define the form and validate it with Zod
import { z } from 'zod';
import { createFormBuilder } from '@prismrepo/forms';
import { usePrismForm, PrismField } from '@prismrepo/adapter-rhf';
import { createZodResolver } from '@prismrepo/adapter-zod';
import { registry } from './registry';
const schema = z.object({
name: z.string().min(1, 'Name is required'),
email: z.string().min(1, 'Email is required').email('Invalid email address'),
});
type FormValues = z.infer<typeof schema>;
const definition = createFormBuilder(registry).defineForm<FormValues>({
name: { type: 'text', label: 'Name' },
email: { type: 'text', label: 'Email' },
});
export function ProfileForm() {
const form = usePrismForm(definition, {
defaultValues: { name: '', email: '' },
resolver: createZodResolver(schema),
});
return (
<form onSubmit={form.handleSubmit((values) => console.log(values))}>
<PrismField form={form} name="name" />
<PrismField form={form} name="email" />
<button type="submit">Submit</button>
</form>
);
}That's a complete form: typed configuration, Zod validation wired through RHF's own resolver
slot, and real submission handling. No PrismProvider is required, usePrismForm takes a
FormDefinition that already carries its own registry.
Next
- Project Setup, installing Prism's own copy-in UI primitives via the CLI instead of hand-writing them.
- Your First Form, the same flow using the real
prismrepoCLI end to end. - Forms, the full form engine: select/checkbox fields, custom validation, submission, and error handling in depth.