The Valibot object schema defining the form structure.
An object mapping field names to their configuration.
This hook analyzes the provided Valibot schema and produces a structured object containing all necessary attributes (id, name, type, required, min/max, etc.) to render form fields. It handles:
import { object, string, number, enum_ } from 'valibot';
import { useFormFields } from './hooks';
enum Role { Admin = 'admin', User = 'user' }
const schema = object({
name: string(),
age: number(),
role: enum_(Role)
});
function MyForm() {
const fields = useFormFields(schema);
return (
<form>
<input {...fields.name} />
<input {...fields.age} />
<select {...fields.role.select}>
{fields.role.options.map(opt => (
<option key={opt.value} value={opt.value}>{opt.name}</option>
))}
</select>
</form>
);
}
Hook to generate field configurations from a Valibot schema.