The single place `react-hook-form` is imported directly in this repo. Everything else should import form state/control from here instead of `react-hook-form` — that keeps the underlying library swappable from one spot later.
Examples of v0.1.9 are shown as code; only the latest version runs live. Open the live examples →
Basic Form Provider
1interface DemoValues {2 email: string;3}45const BasicFormProvider = () => {6 const methods = useForm<DemoValues>({ defaultValues: { email: "" } });7 const { register, handleSubmit } = methods;89 return (10 <FormProvider methods={methods}>11 <form onSubmit={handleSubmit((values) => console.log(values))}>12 <FormField label="Email" htmlFor="email">13 <TextField id="email" {...register("email")} />14 </FormField>15 </form>16 </FormProvider>17 );18};1920render(<BasicFormProvider />);
Basic Form
1interface DemoValues {2 email: string;3}45const BasicForm = () => {6 const methods = useForm<DemoValues>({ defaultValues: { email: "" } });7 const { register } = methods;89 return (10 <Form methods={methods} onSubmit={(values) => console.log(values)}>11 <FormField label="Email" htmlFor="email-form">12 <TextField id="email-form" {...register("email")} />13 </FormField>14 <Button type="submit" variant="primary" size="sm">15 Save16 </Button>17 </Form>18 );19};2021render(<BasicForm />);