React Hook Form
Example with React Hook Form form library, yup
for validation and Field
component to build a simple form.
Usage #
function() {function FormChildren({ errors, register, control }) {return (<><Fielderror={errors && errors.input_text && errors.input_text.message}label="Input Text"maxWidth={300}><InputText {...register('input_text')} /></Field><Fielderror={errors && errors.email && errors.email.message}label="Email"mt="lg"maxWidth={300}><InputText {...register('email')} /></Field><Controllername="submit_checkbox"control={control}render={({field: { onChange, value, ...field },fieldState: { error }}) => {return (<Fielderror={error && error.message}label="You need to check this checkbox to submit"mt="xl"required><Checkbox{...field}checked={value}onClick={onChange}/></Field>)}}/><Button mt="lg" type="submit">Submit</Button></>)}return (<HookFormdefaultValues={{input_text: 'Jungle',submit_checkbox: false}}schemaValidate={() => yup.object().shape({submit_checkbox: yup.boolean().required().oneOf([true]),email: yup.string().email().min(6).required()})}><FormChildren /></HookForm>)}