快速上手

import { Field, Form, useForm } from '@skyroc/form';

interface Login {
  email: string;
  password: string;
}

const LoginForm = () => {
  const form = useForm<Login>();

  function onSubmit(values: Login) {
    console.log(values);
  }

  return (
    <Form
      form={form}
      onFinish={onSubmit}
    >
      <Field name="email">
        <input type="email" />
      </Field>
      <Field name="password">
        <input type="password" />
      </Field>
      <button
        type="button"
        onClick={() => form.submit()}
      >
        登录
      </button>
    </Form>
  );
};

import { Field, List } from '@skyroc/form';

<List name="tags">
  {({ add, fields, remove }) => (
    <>
      {fields.map((field, i) => (
        <Field
          key={field.key}
          name={`tags.${i}`}
        >
          <input />
        </Field>
      ))}
      <button
        type="button"
        onClick={() => add('')}
      >
        +
      </button>
    </>
  )}
</List>;

import { z } from 'zod';

const schema = z.object({
  age: z.number().int().min(18),
  email: z.string().email()
});

<Form schema={schema}>
  <Field name="email">
    <input />
  </Field>
  <Field name="age">
    <input type="number" />
  </Field>
</Form>;