form-atoms/field

README

@form-atoms/field

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

npm install @form-atoms/field jotai-effect 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, InputField } from "form-atoms";

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 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

@form-atoms/field

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

npm install @form-atoms/field jotai-effect 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, InputField } from "form-atoms";

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 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

gem-hunter

form-atoms/field(opens in a new tab)

README

@form-atoms/field

Features

Quick Start

Integrations

README

@form-atoms/field

Features

Quick Start

Integrations