<Reset>

The <Reset> component is a shortcut for an <input type="reset" /> element.

Props

<Reset> takes the following props:

Property	Type	Default	Description
...rest	unknown[]		All props are forwarded to the <input> element

Usage

0

useNativeValidation

mode

revalidateMode

values

errors

import type { FormEvent } from 'react';
import type { IProps } from '../types';
import { type IFormValues, Reset, useForm } from '@per-form/react';

export default function Demo(props: IProps) {
  function handleSubmit(_e: FormEvent<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  const { errors, formProps } = useForm({
    ...props,
    onSubmit: handleSubmit,
  });

  return (
    <form {...formProps}>
      <input name="text" required />
      {errors.all.text && <div className="error">{errors.all.text}</div>}
      <div className="actions">
        <button type="submit">Submit</button>
        <Reset />
      </div>
    </form>
  );
}

0

useNativeValidation

mode

revalidateMode

values

errors

import type { FormEvent } from 'react';
import type { IProps } from '../types';
import {
  Form,
  type IFormContext,
  type IFormValues,
  Reset,
} from '@per-form/react';

export default function Demo(props: IProps) {
  function handleSubmit(_e: FormEvent<HTMLFormElement>, values: IFormValues) {
    console.log(values);
  }

  return (
    <Form {...props} onSubmit={handleSubmit}>
      {({ errors }: IFormContext) => (
        <>
          <input name="text" required />
          {errors.all.text && <div className="error">{errors.all.text}</div>}
          <div className="actions">
            <button type="submit">Submit</button>
            <Reset />
          </div>
        </>
      )}
    </Form>
  );
}