Introduction
Getting started
Documentation
Examples
Basic
Minimal form
Basic usage
Form modes
Required fields
Form methods
Advanced
Validation
Real-world usage
Performance showcase
FAQ
Contribute

Form methods

An example that shows the usage of all form methods.

submit() method

This form submits if name equals exactly Adam.

import React from "react";
import { useBrowserForm } from "react-browser-form";

// UI for documentation only
import { FormTextInput } from "ui/forms";

const defaultValues = {
  name: "James",
};
type Form = typeof defaultValues;

export function ExampleFormMethodsSubmit() {
  const [data, setData] = React.useState<Form>();

  const { formProps, names, submit } = useBrowserForm<Form>({
    name: "example-form-methods-submit",
    mode: "onChange",
    defaultValues,
    onSubmit: setData,
    onChange: ({ name }) => {
      if (name === "Adam") submit();
    },
  });

  return (
    <form {...formProps}>
      <FormTextInput label="Your name" name={names.name} />
    </form>
  );
}
Form meta
Submitted?
No
Has errors?
No
Is dirty?
No
Change reason
Form state

reset() method

This form resets if name equals exactly Adam.

import React from "react";
import { useBrowserForm } from "react-browser-form";

// UI for documentation only
import { FormTextInput } from "ui/forms";

const defaultValues = {
  name: "Steve",
};
type Form = typeof defaultValues;

export function ExampleFormMethodsReset() {
  const [data, setData] = React.useState<Form>();

  const { formProps, names, reset } = useBrowserForm<Form>({
    name: "example-form-methods-reset",
    mode: "onChange",
    defaultValues,
    onSubmit: setData,
    onChange: ({ name }) => {
      if (name === "Adam") reset();
    },
  });

  return (
    <form {...formProps}>
      <FormTextInput label="Your name" name={names.name} />
    </form>
  );
}
Form meta
Submitted?
No
Has errors?
No
Is dirty?
No
Change reason
Form state

reset(values) method

Compare reset() (to default values) and reset(values). Reset method only accepts full schema.

import React from "react";
import { useBrowserForm } from "react-browser-form";

// UI for documentation only
import { Button, Stack } from "react-bootstrap";
import { FormGroup, FormTextInput } from "ui/forms";

const defaultValues = {
  name: "Peter",
  age: 60,
};
type Form = typeof defaultValues;

export function ExampleFormMethodsResetValues() {
  const [data, setData] = React.useState<Form>();

  const { formProps, names, reset } = useBrowserForm<Form>({
    name: "example-form-methods-reset-values",
    defaultValues,
    onSubmit: setData,
  });

  const handleResetClick = () => reset({ name: "Jordan", age: 21 });

  return (
    <form {...formProps}>
      <FormGroup>
        <FormTextInput label="Name" name={names.name} />
        <FormTextInput label="Age" name={names.age} type="number" />
      </FormGroup>

      <Stack direction="horizontal">
        <Button type="reset" className="me-1" size="sm">
          reset()
        </Button>
        <Button size="sm" onClick={handleResetClick}>
          reset(values)
        </Button>
      </Stack>
    </form>
  );
}
Form meta
Submitted?
No
Has errors?
No
Is dirty?
No
Change reason
Form state

setValues(values) method

Allow setting values - any amount of data can be fed to setValues(values), even the whole form.

import React from "react";
import { useBrowserForm } from "react-browser-form";

// UI for documentation only
import { Button, Stack } from "react-bootstrap";
import { FormGroup, FormTextInput } from "ui/forms";

const defaultValues = {
  name: "Michael",
  age: 30,
  occupation: "Product Manager",
  email: "michael@product.com",
};
type Form = typeof defaultValues;

export function ExampleFormMethodsSetValues() {
  const [data, setData] = React.useState<Form>();

  const { formProps, names, setValues } = useBrowserForm<Form>({
    name: "example-form-methods-set-values",
    defaultValues,
    onSubmit: setData,
    onChange: setData,
  });

  const handleSetNameClick = () => setValues({ name: "Jennifer" });

  const handleSetAgeClick = () => setValues({ age: 90 });

  const handleSetEmailClick = () => setValues({ email: "noreply@service.com" });

  const handleSetNameAndAgeClick = () => setValues({ name: "Bobby", age: 15 });

  return (
    <form {...formProps}>
      <FormGroup>
        <FormTextInput label="Name" name={names.name} />
        <FormTextInput label="Age" type="number" name={names.age} />
      </FormGroup>
      <FormGroup>
        <FormTextInput label="Occupation" name={names.occupation} />
        <FormTextInput label="E-mail" name={names.email} />
      </FormGroup>
      <Stack direction="vertical" gap={2} className="justify-content-end">
        <Button className="me-1" size="sm" onClick={handleSetNameClick}>
          Set name to Jennifer
        </Button>
        <Button className="me-1" size="sm" onClick={handleSetAgeClick}>
          Set age to 90
        </Button>
        <Button className="me-1" size="sm" onClick={handleSetEmailClick}>
          Set email to noreply@service.com
        </Button>
        <Button className="me-1" size="sm" onClick={handleSetNameAndAgeClick}>
          Set name to Bobby, Age to 15
        </Button>
      </Stack>
    </form>
  );
}
Form meta
Submitted?
No
Has errors?
No
Is dirty?
No
Change reason
Form state