formik-chakra-ui
TypeScript icon, indicating that this package has built-in type declarations

1.6.1 • Public • Published

Chakra UI Bindings for Formik 🧵

Bindings for using Formik with Chakra UI.

license npm

Why?

Inversion of Control is really cool and Compound Components do provide really flexible API.

Yet this library is opinionated, provides bindings for Formik, with necessary paddings etc. You can easily opt-out continue to use Chakra UI if you need custom components. But this library will support %90 of the use-cases when building forms.

Getting started

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion formik formik-chakra-ui

Or

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion formik formik-chakra-ui

Than setup providers.

import * as React from 'react';
// 1. import `ChakraProvider` component
import { ChakraProvider } from '@chakra-ui/react';

function App() {
  // 2. Use at the root of your app
  return (
    <ChakraProvider>
      <App />
    </ChakraProvider>
  );
}

Documentation

All documentation can be found here

Example

Codesandbox example

Roadmap

Components

  • [x] Button
  • [x] Checkbox
  • [x] Input
  • [x] Number Input
  • [x] Pin Input
  • [x] Radio (<RadioGroup/>)
    • [x] Rendering util function/component for <Radio/>
  • [x] Select
  • [x] Slider
  • [x] Switch
  • [x] Textarea

Utility Components

  • [x] Submit button
  • [x] Reset button
  • [x] Form progress

Dependencies (0)

    Dev Dependencies (24)

    Package Sidebar

    Install

    npm i formik-chakra-ui

    Weekly Downloads

    2,153

    Version

    1.6.1

    License

    MIT

    Unpacked Size

    149 kB

    Total Files

    44

    Last publish

    Collaborators

    • kgnugur