{"id":21517874,"url":"https://github.com/form-atoms/field","last_synced_at":"2025-10-16T12:12:40.087Z","repository":{"id":65707388,"uuid":"597385926","full_name":"form-atoms/field","owner":"form-atoms","description":"FieldAtoms extended with required state and validated by zod schema.","archived":false,"fork":false,"pushed_at":"2024-12-04T10:14:59.000Z","size":5496,"stargazers_count":19,"open_issues_count":3,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-04T11:24:27.378Z","etag":null,"topics":["form-atoms","form-atoms-field","jotai","jotai-form","react","react-form"],"latest_commit_sha":null,"homepage":"https://form-atoms.github.io/field/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/form-atoms.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-04T11:43:23.000Z","updated_at":"2024-12-04T10:15:03.000Z","dependencies_parsed_at":"2023-12-20T07:24:44.552Z","dependency_job_id":"f92802ca-5269-497b-a12c-0bed95941f82","html_url":"https://github.com/form-atoms/field","commit_stats":{"total_commits":493,"total_committers":4,"mean_commits":123.25,"dds":0.2089249492900609,"last_synced_commit":"d0c10449ebecfb404b9805ce0a4e809ce0bdf353"},"previous_names":["miroslavpetrik/react-last-field","form-atoms/field","miroslavpetrik/form-atoms-field"],"tags_count":120,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/form-atoms%2Ffield","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/form-atoms%2Ffield/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/form-atoms%2Ffield/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/form-atoms%2Ffield/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/form-atoms","download_url":"https://codeload.github.com/form-atoms/field/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230527879,"owners_count":18240052,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form-atoms","form-atoms-field","jotai","jotai-form","react","react-form"],"created_at":"2024-11-24T00:45:41.962Z","updated_at":"2025-10-16T12:12:40.080Z","avatar_url":"https://github.com/form-atoms.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"180\" style=\"margin: 32px\" src=\"./form-atoms-field.svg\"\u003e\n  \u003ch1\u003e@form-atoms/field\u003c/h1\u003e\n\u003c/div\u003e\n\nA `zod`-powered [`fieldAtoms`](https://github.com/form-atoms/form-atoms?tab=readme-ov-file#fieldatom) with pre-configured schemas for type \u0026 runtime safety.\n\n```\nnpm install jotai jotai-effect form-atoms @form-atoms/field zod\n```\n\n\u003ca aria-label=\"Minzipped size\" href=\"https://bundlephobia.com/result?p=%40form-atoms/field\"\u003e\n  \u003cimg alt=\"Bundlephobia\" src=\"https://img.shields.io/bundlephobia/minzip/%40form-atoms/field?style=for-the-badge\u0026labelColor=24292e\"\u003e\n\u003c/a\u003e\n\u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/%40form-atoms/field\"\u003e\n  \u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/%40form-atoms/field?style=for-the-badge\u0026labelColor=24292e\"\u003e\n\u003c/a\u003e\n\u003ca aria-label=\"Code coverage report\" href=\"https://codecov.io/gh/form-atoms/field\"\u003e\n  \u003cimg alt=\"Code coverage\" src=\"https://img.shields.io/codecov/c/gh/form-atoms/field?style=for-the-badge\u0026labelColor=24292e\"\u003e\n\u003c/a\u003e\n\n## Features\n\n- [x] **Well-typed fields** required \u0026 validated by default\n- [x] **Initialized field values**, commonly with `undefined` empty value\n- [x] **Optional fields** with schema defaulting to `z.optional()`\n- [x] **Conditionally required fields** - the required state can depend on other jotai atoms\n- [x] **Generic Single-choice Components** [RadioGroup](https://form-atoms.github.io/field/?path=/docs/components-radiogroup--docs) and [Select](https://form-atoms.github.io/field/?path=/docs/components-select--docs)\n- [x] **Generic Multi-choice Components** [CheckboxGroup](https://form-atoms.github.io/field/?path=/docs/components-checkboxgroup--docs) and [MultiSelect](https://form-atoms.github.io/field/?path=/docs/components-multiselect--docs)\n\n### Quick Start\n\n```tsx\nimport { textField, numberField, stringField, Select } from \"@form-atoms/field\";\nimport { fromAtom, useForm, Input } from \"form-atoms\";\nimport { z } from \"zod\";\n\nconst personForm = formAtom({\n  name: textField(),\n  age: numberField({ schema: (s) =\u003e s.min(18) }); // extend the default schema\n  character: stringField().optional(); // make field optional\n});\n\nexport const Form = () =\u003e {\n  const { fieldAtoms, submit } = useForm(personForm);\n\n  return (\n    \u003cform onSubmit={submit(console.log)}\u003e\n      \u003cInputField atom={fieldAtoms.name} label=\"Your Name\" /\u003e\n      \u003cInputField atom={fieldAtoms.age} label=\"Your age (min 18)\" /\u003e\n      \u003cSelect\n        field={fieldAtoms.character}\n        label=\"Character\"\n        options={[\"the good\", \"the bad\", \"the ugly\"]}\n        getValue={(option) =\u003e option}\n        getLabel={(option) =\u003e option}\n      /\u003e\n    \u003c/form\u003e\n  );\n};\n```\n\nSee [Storybook docs](https://form-atoms.github.io/field/) for more.\n\n## Integrations\n\n`@form-atoms/field` comes pre-wired to popular UI libraries:\n\n| 📦Package                                          | 🎨 Storybook                                              | About                                          |\n| -------------------------------------------------- | --------------------------------------------------------- | ---------------------------------------------- |\n| [flowbite](https://github.com/form-atoms/flowbite) | [Flowbite Fields](https://form-atoms.github.io/flowbite/) | Bindigs to Tailwind component library Flowbite |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fform-atoms%2Ffield","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fform-atoms%2Ffield","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fform-atoms%2Ffield/lists"}