Overview

chakra-fields is a simple package that makes working with Chakra UI and formik together easier. It turns Chakra UI form components into controlled components using formik state, while allowing for 100% extensible styling. This package aims to minimize repetitive code and handle some caveats of using Chakra UI components and formik together.

Features

Cleaner code: chakra-fields streamlines the use of Chakra UI and formik, reducing the amount of code required.
100% extensible styling: The package allows for full customization of the styling of the form components.
Caveat handling: chakra-fields addresses some of the challenges that arise when using Chakra UI components and formik together.
Validation functions: Users can easily add formik validation functions as props to the form components.
Reusability: The package promotes reusability by providing a set of components that wrap around Chakra UI form inputs.
Floating label: chakra-fields includes a floating label feature for enhanced user experience.

Installation

To install chakra-fields, follow these steps:

In your terminal, navigate to your project directory.
Run the following command to install the package via npm:

npm install chakra-fields

Import the desired components from chakra-fields into your project:

import { TextField, TextareaField, NumberField, SelectField, CheckboxField } from 'chakra-fields';

Start using the imported components in your forms to leverage the benefits of chakra-fields.

Summary

chakra-fields is a convenient package for using Chakra UI and formik together. It simplifies the process, reduces code repetition, and provides extensible styling options. The package handles common challenges when combining Chakra UI components with formik and offers additional features such as form validation and reusability. With chakra-fields, developers can create cleaner and more efficient forms with Chakra UI.

Codechem

Chakra Fields

Chakra UI Animations