Frontend forms 

1import { AutoForm } from "@gadgetinc/react/auto/polaris";
2import { api } from "../api";
3
4const PostForm = () => {
5  const { register, submit } = useActionForm(api.post.create);
6
7  return <AutoForm action={api.post.create} />;
8};

1import { useActionForm } from "@gadgetinc/react";
2import { api } from "../api";
3
4const PostForm = () => {
5  const { register, submit } = useActionForm(api.post.create);
6
7  return (
8    <form onSubmit={submit}>
9      <label htmlFor="title">Title</label>
10      <input id="title" type="text" {...register("post.title")} />
11      <label htmlFor="content">Content</label>
12      <textarea id="content" {...register("post.content")} />
13      <input type="submit" />
14    </form>
15  );
16};

// don't pass any options, and the form will start with empty data
const { register, submit } = useActionForm(api.post.create);

// pass the findBy option to fetch a post from the backend, and seed the initial form data with it
const { register, submit } = useActionForm(api.post.update, {
  findBy: props.postId,
});

const { register, submit } = useActionForm(api.post.update, {
  // find the initial post record by slug using api.post.findBySlug, and see the initial form values with that data
  findBy: { slug: props.slug },
});

// pass the defaultValues option to use hardcoded data as the initial data
const { register, submit } = useActionForm(api.finishTask, {
  defaultValues: { id: props.user.id },
});

1import type { GadgetRecord } from "@gadget-client/example-app";
2
3const PostForm = (props: { post: GadgetRecord }) => {
4  // pass the record option to use a GadgetRecord object as the initial data
5  const { register, submit } = useActionForm(api.post.update, {
6  defaultValues: props.post,
7  });
8
9  // ...
10};

1const { register, submit } = useActionForm(api.post.create, {
2  defaultValues: {
3    published: false,
4    author: { _link: currentUser.id },
5    categories: ["random thoughts"],
6  },
7});

1import { useActionForm } from "@gadgetinc/react";
2import { api } from "../api";
3
4const PostForm = () => {
5  const { register, submit } = useActionForm(api.post.create);
6
7  return (
8    // ...
9    <input id="title" type="text" {...register("post.title")} />
10  );
11};

1import { useActionForm } from "@gadgetinc/react";
2import { api } from "../api";
3
4const PostForm = () => {
5  const { register, submit } = useActionForm(api.post.create);
6
7  return (
8    <>
9      <input {...register("post.title")} type="text" />
10      <input {...register("post.score")} type="number" />
11      <textarea {...register("post.body")} />
12      <select {...register("post.author")}>{/* ... */}</select>
13    </>
14  );
15};

1import { useActionForm, Controller } from "@gadgetinc/react";
2import { SomeUILibraryInput } from "some-ui-library-without-refs";
3import { api } from "../api";
4
5const PostForm = () => {
6  const { control, submit } = useActionForm(api.post.create);
7
8  return (
9    // ...
10    <Controller
11      // you must pass the `control` object returned by `useActionForm`
12      control={control}
13      // the key into the form state to get and set values from
14      name="post.title"
15      // ... other options you might pass to `register()`
16      // render the controlled/refless component
17      render={({ field }) => (
18        // pass the field props to the inner component (like `value` and `onChange`)
19        <SomeUILibraryInput {...field} />
20      )}
21    />
22    // ...
23  );
24};

1import { Card, Form, FormLayout, TextField } from "@shopify/polaris";
2import { useActionForm, Controller } from "@gadgetinc/react";
3import { api } from "../api";
4
5const AllowedTagForm = () => {
6  const { register, submit, control } = useActionForm(api.allowedTag.create);
7
8  return (
9    <Card>
10      <Form onSubmit={submit}>
11        <FormLayout>
12          <Controller
13            name="keyword"
14            control={control}
15            required
16            render={({ field }) => {
17              // strip out the ref from the field, not accepted by Polaris/functional React components
18              const { ref, ...fieldProps } = field;
19
20              // Pass the fieldProps down to the textField to set the value value and add onChange handlers
21              return <TextField label="Keyword" type="text" autoComplete="off" {...fieldProps} />;
22            }}
23          />
24        </FormLayout>
25      </Form>
26    </Card>
27  );
28};

1import { useActionForm } from "@gadgetinc/react";
2import { api } from "../api";
3
4export default function () {
5  const { submit, register } = useActionForm(api.person.create);
6
7  // use valueAsNumber to submit the age as a number
8  return (
9    <form onSubmit={submit}>
10      <input
11        type="number"
12        {...register("person.age", {
13          valueAsNumber: true,
14        })}
15      />
16    </form>
17  );
18}

1import { useActionForm } from "@gadgetinc/react";
2import { api } from "../api";
3
4export default function () {
5  const { submit, register } = useActionForm(api.blog.create);
6
7  // date-only fields can be handled like any other field
8  return (
9    <form onSubmit={submit}>
10      <input type="date" {...register("blog.publishAt")} />
11    </form>
12  );
13}

1import { useActionForm, Controller } from "@gadgetinc/react";
2import { api } from "../api";
3import { DatePicker } from "react-datepicker";
4
5// import css here for example purposes, you can import in your main file
6import "react-datepicker/dist/react-datepicker.css";
7
8export default function () {
9  const { submit, control } = useActionForm(api.blog.create);
10
11  return (
12    <form onSubmit={submit}>
13      <Controller
14        control={control}
15        name="blog.publishAt"
16        render={({ field }) => <DatePicker {...field} selected={field.value} showTimeSelect />}
17      />
18      <button type="submit">Submit</button>
19    </form>
20  );
21}

1import { useActionForm, Controller } from "@gadgetinc/react";
2import { api } from "../api";
3import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
4
5export default function () {
6  const { submit, control } = useActionForm(api.blog.create);
7
8  return (
9    <form onSubmit={submit}>
10      <Controller
11        name="blog.publishAt"
12        control={control}
13        render={({ field: { ref, ...fieldProps } }) => <DateTimePicker {...fieldProps} inputRef={ref} />}
14      />
15      <button type="submit">Submit</button>
16    </form>
17  );
18}

1import { useActionForm } from "@gadgetinc/react";
2import { api } from "../api";
3
4export default function () {
5  const { submit, register } = useActionForm(api.blog.create);
6
7  // use type="file" on the input element to allow users to select and submit a file
8  return (
9    <form onSubmit={submit}>
10      <input type="file" {...register("quiz.hero")} />
11      <button type="submit" disabled={isUploading}>
12        Submit
13      </button>
14    </form>
15  );
16}

1import { useActionForm } from "@gadgetinc/react";
2import { api } from "../api";
3import { useState } from "react";
4
5export default function () {
6  const { submit, setValue } = useActionForm(api.blog.create);
7
8  // state to manage the file upload
9  const [isUploading, setIsUploading] = useState(false);
10  const [fileName, setFileName] = useState(null);
11
12  return (
13    <form onSubmit={submit}>
14      <div
15        onDragOver={(event) => event.preventDefault()}
16        onDrop={async (event) => {
17          event.preventDefault();
18
19          const file = event.dataTransfer.files[0];
20          // send the file to cloud storage
21          setIsUploading(true);
22
23          const { url, token } = await api.getDirectUploadToken();
24
25          try {
26            await fetch(url, {
27              method: "PUT",
28              headers: {
29                "Content-Type": file.type,
30              },
31              body: file,
32            });
33
34            // update the form state with the token and file name for submission
35            setValue("blog.hero", { directUploadToken: token, fileName: file.name });
36            // update local state
37            setFileName(file.name);
38          } finally {
39            setIsUploading(false);
40          }
41        }}
42      >
43        {isUploading ? "Uploading ..." : fileName ? fileName : "Drop a file here"}
44      </div>
45      <button type="submit" disabled={isUploading}>
46        Submit
47      </button>
48    </form>
49  );
50}

1import { useActionForm, useFieldArray } from "@gadgetinc/react";
2import { api } from "../api";
3
4export default function () {
5  // useActionForm for the parent `quiz` model
6  const { submit, register, control } = useActionForm(api.quiz.create);
7
8  // register fields on the 'questions' relationship of the 'quiz' model
9  const { fields, append, remove } = useFieldArray({ control, name: "quiz.questions" });
10
11  // use register on the quiz name field
12  // map over questions fields in array and register each existing question individually
13  return (
14    <form onSubmit={submit}>
15      <input {...register("quiz.name")} />
16      <button type="submit">Submit</button>
17      <ol>
18        {fields.map((question, index) => {
19          // render each question, registering by the index in the fieldArray
20          // also allows for removing questions using the array index and `remove`
21          return (
22            <li key={question.id}>
23              <input {...register(`quiz.questions.${index}.body`)} />
24              <button type="button" onClick={() => remove(index)}>
25                Remove question
26              </button>
27            </li>
28          );
29        })}
30      </ol>
31      <div>
32        <button type="button" onClick={() => append({ body: "" })}>
33          Add question
34        </button>
35      </div>
36    </form>
37  );
38}

1import { useActionForm } from "@gadgetinc/react";
2import { api } from "../api";
3
4const PostForm = () => {
5  const {
6    formState: { isDirty, isValid, errors, isSubmitting, isSubmitSuccessful },
7  } = useActionForm(api.post.create);
8
9  return (
10    // ...
11    <button disabled={!isDirty || !isValid} />
12  );
13};