Live fields

Avoid using onChange mode unless it's necessary. It is the slowest of all modes. If you need fields that act as they would with onChange mode, prefer using liveFields only for those fields.

This example uses react-bootstrap for styling purposes and some custom UI components for visual aspects.

Be mindful using onChange or live fields - every change in value triggers form hydration, type transformation and validation for changed fields and calls your own onChange callback.

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

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

const defaultValues = {
  name: "",
  commentTitle: "",
  commentBody: "",
  rememberMe: false,
};
type Form = typeof defaultValues;

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

  const { formProps, names } = useBrowserForm<Form>({
    name: "example-live-fields-form",
    defaultValues,
    onSubmit: setData,
    onChange: setData, // Because we use live fields
    liveFields: ["name", "rememberMe"],
  });

  return (
    <form {...formProps}>
      <FormGroupTitle>Leave a comment</FormGroupTitle>
      <FormGroup>
        <FormTextInput label="Your name (live)" name={names.name} />
        <FormTextInput label="Comment title" name={names.commentTitle} />
      </FormGroup>
      <FormTextarea placeholder="What's on your mind?" name={names.commentBody} rows={3} />
      <FormCheckbox label="Remember me next time (live)" name={names.rememberMe} />

      <Stack direction="horizontal" className="justify-content-end">
        <Button type="submit" size="sm">
          Submit
        </Button>
      </Stack>
    </form>
  );
}

Form meta
Submitted?	No
Has errors?	No
Is dirty?	No
Change reason
Form state