remix form disable submit without useState

Question

Using remix form
Is there a way to disable the submit button without using state?

eg (this is only way I know how to do this...)

<Form method="post">
  <input type="text" onChange={(e) => setValue(e.target.value)} value={value} />
  <button type="submit" disabled={value.length < 2}>Submit</button>
</Form>

I like that in remix we can remove a lot of the useState stuff, is it possible to achieve this here as well?

Answer 1

Since you are using Form component

// for some reason they use `useTransition as useNavigation`
// https://remix-forms.seasoned.cc/get-started

import { Form, useTransition as useNavigation } from "@remix-run/react";

const navigation = useNavigation();
const isSubmitting = navigation.state === "submitting";


<button disabled={isSubmitting}>Submit</button>