Skip to main content

Getting started

formzk is a React form library built on top of react-hook-form with a headless core and swappable UI adapters.

  • @formzk/core — framework-agnostic form state, validation, and component registry.
  • @formzk/mui — Material UI adapter (inputs, layout, error views).
  • @formzk/tamagui — Tamagui adapter for web and React Native (inputs, layout, error views).

Bring your own UI by registering components against @formzk/core, or use an adapter for a batteries-included experience.

Install​

yarn add @formzk/core react-hook-form

Optional: use the MUI adapter.

yarn add @formzk/mui @mui/material @emotion/react @emotion/styled

Optional: use the Tamagui adapter (web & React Native).

yarn add @formzk/tamagui tamagui

Quick start​

import { Formzk } from '@formzk/core';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

type LoginPayload = { email: string; password: string };

const schema = yup.object({
  email: yup.string().required().email(),
  password: yup.string().required().min(8),
});

export function LoginForm() {
  return (
    <Formzk.Form<LoginPayload>
      options={{ resolver: yupResolver(schema) }}
      onSubmit={(values) => console.log(values)}
    >
      <Formzk.Input name="email" component="MyTextField" />
      <Formzk.Input name="password" component="MyTextField" />
      <Formzk.Submit render={(submit) => <button onClick={submit}>Sign in</button>} />
    </Formzk.Form>
  );
}

Register the input components you referenced via component="..." — see Registering components.

Why formzk?​

  • Same form declaration works across UI stacks — swap @formzk/mui for @formzk/tamagui (or your own adapter) without rewriting your forms.
  • Strongly-typed: augment ComponentPropsMap via declaration merging to get autocomplete on every component="..." usage.
  • Layer-thin: the core is a declarative wrapper around useForm / Controller — no hidden state.

Next: read the @formzk/core overview or jump to the MUI or Tamagui adapter guide.