Develop ultra fast with Prismane 🎉


useForm hook provides a simple way to handle forms.


import { useForm } from "@prismane/core/hooks";


function Demo() {
  const { handleSubmit, handleReset, register } = useForm({
    fields: {
      username: {
        value: "",
        validators: {
          required: (v: string) => required(v),
          min: (v: string) => min(v, 4),
          username: (v: string) => username(v),

  return (
      onSubmit={(e: any) => {
        handleSubmit(e, (v: any) => console.log(v));
      onReset={() => handleReset()}
        placeholder="Enter username: "
      <Flex align="center" gap={fr(2)}>
        <Button variant="primary" type="submit">
        <Button variant="primary" type="reset">



initialFormInitialFormStateThe initial state of the form.{}
type InitialFormState = {
  fields?: InitialFields;
  validateOn?: "change" | "blur" | "all";
  resetOptions?: {
    keepDirty?: boolean;
    keepTouched?: boolean;
    keepErrors?: boolean;

type InitialField = {
  value: any;
  error?: null | string;
  validators?: Validators;

type InitialFields = {
  [x: string]: InitialField;

type Validator = (v: string) => null | string;

type Validators = { [x: string]: Validator };

Return Value

formStateFormStateThe current state of the form.
register(name: string) => voidFunction that registers the field.
setValue(name: string, value: Value) => voidFunction that programmatically changes the value of a field.
setError(name: string, error: string) => voidFunction that programmatically sets an error for the field.
getFormValues() => {[x in string]: Value}Function that returns the current values of all the fields registered.
getValue(name: string) => ValueFunction that returns the current value for a given field.
getFormErrors() => {[x in string]: string}Function that returns the current errors of all the fields registered.
getError(name: string) => stringFunction that returns the current error for a given field.
validate(name: string, value: Value) => stringFunction that validates a field using all of it's provided validators and returns the error.
handleChange(name: string, value: Value) => stringFunction that handles the change of the value for a given field.
handleBlur(name: string) => voidFunction that handles the blur of a given field and marks it as touched.
validateForm() => booleanFunction that validates the whole form and returns a boolean which determines if it has errors.
handleReset() => voidFunction that resets the state of all of the fields in the registered form.
handleSubmit(event: any, onSubmit: (values: Values) => void, onError: (values: Values) => void) => voidFunction that handles the submit of the form.