Skip to content

FieldAtoms extended with required state and validated by zod schema.

License

Notifications You must be signed in to change notification settings

form-atoms/field

Repository files navigation

@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
Bundlephobia NPM Version Code coverage

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