5.1.1 • Published 1 year ago

@form-atoms/field v5.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

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🎨 StorybookAbout
flowbiteFlowbite FieldsBindigs to Tailwind component library Flowbite
chakra-uiChakraUI FieldsBindings to CSS-in-JS library Chakra UI
5.1.1

1 year ago

5.1.0

1 year ago

5.0.1

1 year ago

4.1.0-next.1

1 year ago

5.0.0

1 year ago

4.0.16

1 year ago

4.0.15

1 year ago

4.0.15-next.1

1 year ago

4.0.13-next.1

1 year ago

4.0.12

1 year ago

4.0.14

1 year ago

4.0.13

1 year ago

4.0.11

1 year ago

4.0.9

1 year ago

4.0.8

1 year ago

4.0.10

1 year ago

4.0.7-next.8

1 year ago

4.0.7-next.7

1 year ago

4.0.7-next.6

1 year ago

4.0.7-next.5

1 year ago

4.0.7-next.9

1 year ago

4.0.7-next.4

1 year ago

4.0.7-next.3

1 year ago

4.0.7-next.2

1 year ago

4.0.7-next.1

1 year ago

4.0.7

1 year ago

4.0.7-next.10

1 year ago

4.0.6

1 year ago

4.0.5

1 year ago

4.0.4

1 year ago

4.0.3

1 year ago

4.0.2

1 year ago

4.0.2-next.1

1 year ago

4.0.2-next.2

1 year ago

4.0.1

1 year ago

4.0.0

2 years ago

4.0.0-next.1

2 years ago

3.8.14

2 years ago

3.8.13

2 years ago

3.8.12

2 years ago

3.8.10

2 years ago

3.8.11

2 years ago

3.8.9

2 years ago

3.8.8

2 years ago

3.8.7

2 years ago

3.8.6

2 years ago

3.8.5

2 years ago

3.5.4

2 years ago

3.4.0

2 years ago

3.8.0

2 years ago

3.6.2

2 years ago

3.6.1

2 years ago

3.6.0

2 years ago

3.8.4

2 years ago

3.8.3

2 years ago

3.8.2

2 years ago

3.6.4

2 years ago

3.8.1

2 years ago

3.6.3

2 years ago

3.5.3

2 years ago

3.7.0

2 years ago

3.5.2

2 years ago

3.5.1

2 years ago

3.3.3

2 years ago

3.5.0

2 years ago

3.3.1

2 years ago

3.3.0

2 years ago

3.3.2

2 years ago

3.0.0-next.2

2 years ago

3.0.0-next.1

2 years ago

3.2.0

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

2.5.14

2 years ago

2.5.12

2 years ago

2.5.13

2 years ago

2.5.15-next.1

2 years ago

3.1.0

2 years ago

2.5.0-next.1

2 years ago

2.5.0

2 years ago

2.4.1

2 years ago

2.4.0

2 years ago

2.3.1

2 years ago

2.5.2

2 years ago

2.5.1

2 years ago

2.4.2

2 years ago

2.5.4

2 years ago

2.5.3

2 years ago

2.5.6

2 years ago

2.5.5

2 years ago

2.5.8

2 years ago

2.5.7

2 years ago

2.5.9

2 years ago

2.5.10

2 years ago

2.4.1-next.1

2 years ago

2.5.11

2 years ago

2.3.0

2 years ago

2.1.2

2 years ago

2.2.0

2 years ago

2.1.1

2 years ago

2.1.0

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.1.2

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

2.0.0-next.1

2 years ago

2.0.0

2 years ago

1.0.2

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

1.0.0-next.1

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago