React Hook Form

Компоненты поддерживают работу с библиотекой React Hook Form

Live Editor

Result

Open in CodeSandbox

Особенности работы

DatePicker и DatePickerRange

Свойство name и onChange лучше передавать напрямую, так как типы передаваемые из register в параметрах min и max несовместимы.

Пример с валидацией

Пример CodeSendBox

export function App() {
  const schema = yup
    .object({
      email: yup
        .string()
        .email("Некорректная почта")
        .required("Заполните поле"),
      tel: yup
        .string()
        .required("Заполните поле")
        .min(22, "Телефон должен содержать 11 цифр"),
      password: yup
        .string()
        .required("Заполните поле")
        .min(8, "Пароль должен быть не менее 8 символов"),
      accept: yup
        .boolean("Согласитесь с правилами использования")
        .oneOf([true], "Согласитесь с правилами использования"),
    })
    .required();

  const { register, handleSubmit, formState } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      style={{ display: "flex", flexDirection: "column", gap: "20px" }}
    >
      <TextField
        {...register("email")}
        placeholder="Почта"
        view={formState.errors.email?.message ? "negative" : "default"}
        leftHelper={formState.errors.email?.message}
        required={false}
      />
      <Mask
        {...register("tel")}
        placeholder="Телефон"
        mask="+7 (000) 000 - 00 - 00"
        maskChar="_"
        view={formState.errors.email?.message ? "negative" : "default"}
        leftHelper={formState.errors.tel?.message}
        required={false}
      />
      <TextField
        {...register("password")}
        type="password"
        placeholder="Пароль"
        view={formState.errors.password?.message ? "negative" : "default"}
        leftHelper={formState.errors.password?.message}
        required={false}
      />
      <Switch
        {...register("accept")}
        label="Я согласен с правилами сервиса"
        labelPosition="after"
      />
      {formState.errors.accept?.message && (
        <TextS color="red">{formState.errors.accept?.message}</TextS>
      )}
      <Button type="submit">Войти</Button>
    </form>
  );
}