React Hook Form

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

Live Editor

Result

Open in CodeSandbox

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

DatePicker и DatePickerRange

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

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

Пример CodeSandbox

import { useForm } from "react-hook-form";
import React from "react";
import { Button, TextField, Switch, TextS } from "@salutejs/plasma-web";

import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

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

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

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      style={{ display: "flex", flexDirection: "column", gap: "20px" }}
    >
      <TextField
        {...register("login")}
        placeholder="Логин"
        status={!!errors.login?.message ? "error" : ""}
        helperText={errors.login?.message}
        required={false}
      />
      <TextField
        {...register("password")}
        type="password"
        placeholder="Пароль"
        status={!!errors.password?.message ? "error" : ""}
        helperText={errors.password?.message}
        required={false}
      />
      <Switch
        {...register("accept")}
        label="Я согласен с правилами сервиса"
        labelPosition="after"
      />
      {!!errors.accept?.message && (
        <TextS color="red">{errors.accept?.message}</TextS>
      )}
      <Button type="submit">Войти</Button>
    </form>
  );
}