React Hook Form Chakra Fields

Overview

React Hook Form Chakra Fields is a collection of form fields built on top of the React component library Chakra UI. It is integrated with the performant form library React Hook Form and other JavaScript/TypeScript libraries.

Features

• Input Field: Standard input field.
• Masked Input Field: Input field with the ability to set customized masks, such as phone numbers or time.
• Money Field: Input field intended for monetary values, which can be easily extended with a currency select option.
• Select Field: Advanced select field built on top of the powerful react-select library.
• Date Field: Standard date select field using the react-datepicker library.
• DateTimeField: Date select field integrated with an additional input for providing a specific time.
• DateTimeOnlyField: Time field for selecting time values only.
• All components are accessible and have support for Chakra UI dark mode.

Installation

To use React Hook Form Chakra Fields, you need to install the following libraries as peer dependencies:

npm install react-hook-form chakra-ui currency.js dayjs react-datepicker react-number-format react-select react-text-mask

Summary

React Hook Form Chakra Fields is a convenient collection of form fields that are built on top of the Chakra UI React component library. It integrates with React Hook Form and various JavaScript/TypeScript libraries to provide efficient and accessible form inputs. The library includes a range of pre-made form fields such as input, masked input, money, select, date, and time fields. Additionally, all components are designed to support Chakra UI dark mode.