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-b2c";

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>
  );
}