{"id":13422278,"url":"https://github.com/with-heart/chakra-formik-experiment","last_synced_at":"2025-09-08T22:42:40.987Z","repository":{"id":50223718,"uuid":"342617908","full_name":"with-heart/chakra-formik-experiment","owner":"with-heart","description":"An experiment for tight-knit Chakra+Formik integration with a familiar API","archived":false,"fork":false,"pushed_at":"2021-06-01T18:44:47.000Z","size":330,"stargazers_count":35,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-01T07:27:37.812Z","etag":null,"topics":["chakra-ui","formik"],"latest_commit_sha":null,"homepage":"","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/with-heart.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"with-heart"}},"created_at":"2021-02-26T15:29:16.000Z","updated_at":"2023-11-20T22:37:10.000Z","dependencies_parsed_at":"2022-09-26T20:52:54.428Z","dependency_job_id":null,"html_url":"https://github.com/with-heart/chakra-formik-experiment","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/with-heart/chakra-formik-experiment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/with-heart%2Fchakra-formik-experiment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/with-heart%2Fchakra-formik-experiment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/with-heart%2Fchakra-formik-experiment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/with-heart%2Fchakra-formik-experiment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/with-heart","download_url":"https://codeload.github.com/with-heart/chakra-formik-experiment/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/with-heart%2Fchakra-formik-experiment/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274181739,"owners_count":25236552,"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","status":"online","status_checked_at":"2025-09-08T02:00:09.813Z","response_time":121,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["chakra-ui","formik"],"created_at":"2024-07-30T23:00:40.992Z","updated_at":"2025-09-08T22:42:40.960Z","avatar_url":"https://github.com/with-heart.png","language":"TypeScript","funding_links":["https://github.com/sponsors/with-heart"],"categories":["📚️ Libraries"],"sub_categories":[],"readme":"# Chakra+Formik Integration Experiment\n\n## What is this?\n\nThis project is a prototype for a Chakra UI+Formik integration library.\n\nThe goals of this project:\n\n- provide an API that is familiar to both Chakra UI and Formik users\n- experiment with and establish patterns that can eventually be turned into an\n  official Chakra UI extension library\n\n**As this is a pre-`1.0` experiment, the API is subject to change.**\n\n## Demo\n\nCheck out this CodeSandbox for a demonstration of the components in action:\nhttps://codesandbox.io/s/interesting-blackburn-oldox?file=/src/App.tsx\n\n## Installation\n\nInstall [Chakra UI](https://chakra-ui.com/docs/getting-started) and\n[Formik](https://formik.org/docs/overview#npm), then:\n\n```sh\n# with yarn\nyarn add chakra-formik-experiment\n\n# with npm\nnpm install chakra-formik-experiment\n```\n\n## Usage\n\n`chakra-formik-experiment` works by connecting Chakra form components to a\nFormik form's context using the `name` prop.\n\nThe `name` prop can be passed directly to the library's form components or\nprovided to them by the `FieldControl` component.\n\n### As individual fields\n\n```tsx\nimport * as React from \"react\"\nimport { Formik } from \"formik\"\nimport { InputFormik } from \"chakra-formik-experiment\"\n\nconst Example = () =\u003e (\n  \u003cFormik\u003e\n    \u003cInputFormik id=\"name\" name=\"name\" placeholder=\"Enter your name\" /\u003e\n  \u003c/Formik\u003e\n)\n```\n\n### With `FieldControl`\n\n`FieldControl` provides the same behavior as Chakra's `FormControl`, but\nautomatically connects wrapped form elements and `FieldErrorMessage` components\nwith Formik via the `name` prop.\n\n```tsx\nimport * as React from \"react\"\nimport { Formik } from \"formik\"\nimport { FormLabel } from \"@chakra-ui/react\"\nimport {\n  FieldControl,\n  FieldErrorMessage,\n  InputFormik,\n} from \"chakra-formik-experiment\"\n\nconst Example = () =\u003e (\n  \u003cFieldControl id=\"name\" name=\"name\"\u003e\n    \u003cFormLabel\u003eName\u003c/FormLabel\u003e\n    \u003cInputFormik /\u003e\n    \u003cFieldErrorMessage /\u003e\n  \u003c/FieldControl\u003e\n)\n```\n\n## Components\n\n### `CheckboxFormik`\n\nThe `CheckboxFormik` component is Chakra's `Checkbox` component except it's\nautomatically connected to Formik via the `name` prop.\n\n```tsx\nimport * as React from \"react\"\nimport { Formik } from \"formik\"\nimport { CheckboxFormik } from \"chakra-formik-experiment\"\n\nconst CheckboxFormikExample = () =\u003e (\n  \u003cFormik initialValues={{ checkbox: true }} onSubmit={console.log}\u003e\n    \u003cCheckboxFormik name=\"checkbox\" /\u003e\n  \u003c/Formik\u003e\n)\n```\n\n### `CheckboxGroupFormik`\n\nThe `CheckboxGroupFormik` component is Chakra's `CheckboxGroup` component except\nit's automatically connected to Formik via the `name` prop.\n\n**Note**: Use the regular Chakra `Checkbox` component within\n`CheckboxGroupFormik`. We could eventually make `CheckboxFormik` work with it.\n\n```tsx\nimport * as React from \"react\"\nimport { Formik } from \"formik\"\nimport { Checkbox } from \"@chakra-ui/react\"\nimport { CheckboxGroupFormik } from \"chakra-formik-experiment\"\n\nconst CheckboxGroupFormikExample = () =\u003e (\n  \u003cFormik initialValues={{ radio: \"A\" }} onSubmit={console.log}\u003e\n    \u003cCheckboxGroupFormik name=\"radio\"\u003e\n      \u003cCheckbox value=\"A\"\u003eA\u003c/Checkbox\u003e\n      \u003cCheckbox value=\"B\"\u003eB\u003c/Checkbox\u003e\n    \u003c/CheckboxGroupFormik\u003e\n  \u003c/Formik\u003e\n)\n```\n\n### `InputFormik`\n\nThe `InputFormik` component is Chakra's `Input` component except it's\nautomatically connected to Formik via the `name` prop.\n\n```tsx\nimport * as React from \"react\"\nimport { Formik } from \"formik\"\nimport { InputFormik } from \"chakra-formik-experiment\"\n\nconst InputFormikExample = () =\u003e (\n  \u003cFormik initialValues={{ name: \"name\" }} onSubmit={console.log}\u003e\n    \u003cInputFormik name=\"name\" /\u003e\n  \u003c/Formik\u003e\n)\n```\n\n### `RadioFormik`\n\nThe `RadioFormik` component is Chakra's `Radio` component except it's\nautomatically connected to Formik via the `name` prop.\n\n```tsx\nimport * as React from \"react\"\nimport { Formik } from \"formik\"\nimport { RadioFormik } from \"chakra-formik-experiment\"\n\nconst RadioFormikExample = () =\u003e (\n  \u003cFormik initialValues={{ radio: \"A\" }} onSubmit={console.log}\u003e\n    \u003cRadioFormik name=\"radio\" value=\"A\"\u003e\n      A\n    \u003c/RadioFormik\u003e\n    \u003cRadioFormik name=\"radio\" value=\"B\"\u003e\n      B\n    \u003c/RadioFormik\u003e\n  \u003c/Formik\u003e\n)\n```\n\n### `RadioGroupFormik`\n\nThe `RadioGroupFormik` component is Chakra's `RadioGroup` component except it's\nautomatically connected to Formik via the `name` prop.\n\n**Note**: Use the regular Chakra `Radio` component within `RadioGroupFormik`. We\ncould eventually make `RadioFormik` work with it.\n\n```tsx\nimport * as React from \"react\"\nimport { Formik } from \"formik\"\nimport { Radio } from \"@chakra-ui/react\"\nimport { RadioGroupFormik } from \"chakra-formik-experiment\"\n\nconst RadioGroupFormikExample = () =\u003e (\n  \u003cFormik initialValues={{ radio: \"A\" }} onSubmit={console.log}\u003e\n    \u003cRadioGroupFormik name=\"radio\"\u003e\n      \u003cRadio value=\"A\"\u003eA\u003c/Radio\u003e\n      \u003cRadio value=\"B\"\u003eB\u003c/Radio\u003e\n    \u003c/RadioGroupFormik\u003e\n  \u003c/Formik\u003e\n)\n```\n\n### `SelectFormik`\n\nThe `SelectFormik` component is Chakra's `Select` component except it's\nautomatically connected to Formik via the `name` prop.\n\n```tsx\nimport * as React from \"react\"\nimport { Formik } from \"formik\"\nimport { SelectFormik } from \"chakra-formik-experiment\"\n\nconst SelectFormikExample = () =\u003e (\n  \u003cFormik initialValues={{ item: \"A\" }} onSubmit={console.log}\u003e\n    \u003cSelectFormik name=\"item\"\u003e\n      \u003coption value=\"A\"\u003eA\u003c/option\u003e\n      \u003coption value=\"B\"\u003eB\u003c/option\u003e\n    \u003c/SelectFormik\u003e\n  \u003c/Formik\u003e\n)\n```\n\n### `EditableFormik`\n\nThe `EditableFormik` component is Chakra's `Editable` component except it's\nautomatically connected to Formik via the `name` prop.\n\n```tsx\nimport * as React from \"react\"\nimport { Formik } from \"formik\"\nimport { EditableFormik } from \"chakra-formik-experiment\"\nimport { EditablePreview, EditableInput } from \"@chakra-ui/react\"\n\nconst EditableFormikExample = () =\u003e (\n  \u003cFormik initialValues={{ name: \"Kenichi\" }} onSubmit={console.log}\u003e\n    \u003cEditableFormik name=\"name\"\u003e\n      \u003cEditablePreview /\u003e\n      \u003cEditableInput /\u003e\n    \u003c/EditableFormik\u003e\n  \u003c/Formik\u003e\n)\n```\n\n### `FieldControl`\n\nThe `FieldControl` component has the same API and behavior as `FormControl`,\nexcept that the `name` prop is used to connect the form element(s) to Formik.\nThis allows you to provide the same accessible form element experience you get\nfrom `FormControl`, with the added benefit that form elements and\n`FieldErrorMessage` are automatically associated with a Formik field.\n\n```tsx\nimport * as React from \"react\"\nimport { Formik } from \"formik\"\nimport { FormLabel } from \"@chakra-ui/react\"\nimport {\n  FieldControl,\n  FieldErrorMessage,\n  InputFormik,\n} from \"chakra-formik-experiment\"\n\nconst Example = () =\u003e (\n  \u003cFieldControl id=\"name\" name=\"name\"\u003e\n    \u003cFormLabel\u003eName\u003c/FormLabel\u003e\n    \u003cInputFormik /\u003e\n    \u003cFieldErrorMessage /\u003e\n  \u003c/FieldControl\u003e\n)\n```\n\n**Note**: If a prop exists on both the `FieldControl` and the form element\ncomponent, the prop of the component will be used.\n\n```tsx\n// in this example, the input is connected to Formik as `\"component\"`\nconst Example = () =\u003e (\n  \u003cFieldControl name=\"control\"\u003e\n    \u003cInputFormik name=\"component\"\u003e\n  \u003c/FieldControl\u003e\n)\n```\n\n### `FieldErrorMessage`\n\nThe `FieldErrorMessage` component works similarly to the Chakra\n`FormErrorMessage` component, except it is automatically connected to the\n`touched` and `error` state of the field, meaning that if the field has been\ntouched and has a validation error, that error message will be displayed.\n\n```tsx\nconst FieldErrorMessageExample = () =\u003e (\n  \u003cFieldControl name=\"name\"\u003e\n    \u003cInputFormik /\u003e\n    \u003cFieldErrorMessage /\u003e\n  \u003c/FieldControl\u003e\n)\n```\n\n**Note**: This behavior will not occur if an `isInvalid` prop is passed to\n`FieldControl`.\n\n```tsx\n// in this example, the error message is never displayed because\n// `isInvalid={false}` is passed to `FieldControl`\nconst Example = () =\u003e (\n  \u003cFieldControl name=\"name\" isInvalid={false}\u003e\n    \u003cInputFormik /\u003e\n    \u003cFieldErrorMessage /\u003e\n  \u003c/FieldControl\u003e\n)\n```\n\n### `NumberInputFormik`\n\nThe `NumberInputFormik` component is Chakra's `NumberInput` component except\nit's automatically connected to Formik via the `name` prop. The value is\nformatted as a number when the form is submitted.\n\n```tsx\nimport * as React from \"react\"\nimport { Formik } from \"formik\"\nimport { NumberInputFormik } from \"chakra-formik-experiment\"\n\nconst NumberInputFormikExample = () =\u003e (\n  \u003cFormik initialValues={{ number: 123 }} onSubmit={console.log}\u003e\n    \u003cNumberInputFormik name=\"number\"\u003e\n      \u003cNumberInputField /\u003e\n      \u003cNumberInputStepper\u003e\n        \u003cNumberIncrementStepper /\u003e\n        \u003cNumberDecrementStepper /\u003e\n      \u003c/NumberInputStepper\u003e\n    \u003c/NumberInputForm\u003e\n  \u003c/Formik\u003e\n)\n```\n\n### `SwitchFormik`\n\nThe `SwitchFormik` component is Chakra's `Switch` component except it's\nautomatically connected to Formik via the `name` prop. The value is formatted as\na number when the form is submitted.\n\n```tsx\nimport * as React from \"react\"\nimport { Formik } from \"formik\"\nimport { SwitchFormik } from \"chakra-formik-experiment\"\n\nconst SwitchFormikExample = () =\u003e (\n  \u003cFormik initialValues={{ switch: true }} onSubmit={console.log}\u003e\n    \u003cSwitchFormik name=\"switch\" /\u003e\n  \u003c/Formik\u003e\n)\n```\n\n### `TextareaFormik`\n\nThe `TextareaFormik` component is Chakra's `Textarea` component except it's\nautomatically connected to Formik via the `name` prop.\n\n```tsx\nimport * as React from \"react\"\nimport { Formik } from \"formik\"\nimport { TextareaFormik } from \"chakra-formik-experiment\"\n\nconst TextareaFormikExample = () =\u003e (\n  \u003cFormik initialValues={{ name: \"name\" }} onSubmit={console.log}\u003e\n    \u003cTextareaFormik name=\"name\" /\u003e\n  \u003c/Formik\u003e\n)\n```\n\n## Integration Checklist\n\n- [x] `Checkbox` (`CheckboxFormik`)\n- [x] `CheckboxGroup` (`CheckboxGroupFormik`)\n- [x] `Editable` (`EditableFormik`)\n- [x] `FormControl` (`FieldControl`)\n- [x] `FormErrorMessage` (`FieldErrorMessage`)\n- [x] `Input` (`InputFormik`)\n- [x] `NumberInput` (`NumberInputFormik`)\n- [x] `Radio` (`RadioFormik`)\n- [x] `RadioGroup`\n- [x] `Select` (`SelectFormik`)\n- [ ] `Slider`\n- [x] `Switch` (`SwitchFormik`)\n- [x] `Textarea` (`TextAreaFormik`)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwith-heart%2Fchakra-formik-experiment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwith-heart%2Fchakra-formik-experiment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwith-heart%2Fchakra-formik-experiment/lists"}