@form-atoms/field

A zod-powered fieldAtoms with pre-configured schemas for type & runtime safety.

npm install jotai jotai-effect form-atoms @form-atoms/field zod

Features

• Well-typed fields required & validated by default
• Initialized field values, commonly with undefined empty value
• Optional fields with schema defaulting to z.optional()
• Conditionally required fields - the required state can depend on other jotai atoms
• Generic Single-choice Components RadioGroup and Select
• Generic Multi-choice Components CheckboxGroup and MultiSelect

Quick Start

import { textField, numberField, stringField, Select } from "@form-atoms/field";
import { fromAtom, useForm, Input } from "form-atoms";
import { z } from "zod";

const personForm = formAtom({
  name: textField(),
  age: numberField({ schema: (s) => s.min(18) }); // extend the default schema
  character: stringField().optional(); // make field optional
});

export const Form = () => {
  const { fieldAtoms, submit } = useForm(personForm);

  return (
    <form onSubmit={submit(console.log)}>
      <InputField atom={fieldAtoms.name} label="Your Name" />
      <InputField atom={fieldAtoms.age} label="Your age (min 18)" />
      <Select
        field={fieldAtoms.character}
        label="Character"
        options={["the good", "the bad", "the ugly"]}
        getValue={(option) => option}
        getLabel={(option) => option}
      />
    </form>
  );
};

See Storybook docs for more.

Integrations

@form-atoms/field comes pre-wired to popular UI libraries:

📦Package	🎨 Storybook	About
flowbite	Flowbite Fields	Bindigs to Tailwind component library Flowbite
chakra-ui	ChakraUI Fields	Bindings to CSS-in-JS library Chakra UI