Node's Package Magician

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

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

    Progress

    Components

    • [x] Button
    • [x] Checkbox
    • [ ] Editable 👀
    • [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

    Install

    npm i formik-chakra-ui

    DownloadsWeekly Downloads

    1,070

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    139 kB

    Total Files

    73

    Last publish

    Collaborators

    • kgnugur