React Hook Form Chakra Fields

A collection of form fields on top of simple and accessible react component library Chakra UI and performant form library React Hook Form, integrated with many other js/ts libraries.

Included inputs and form fields:

• Input Field - standard input field
• Masked Input Field - input field with the ability to set any mask you want for example phone or time
• Money Field - input field intended for monetary values (you can easily extend it with for example currency select)
• Select Field - advanced select field on top of powerful react-select library
• Date Field - standard date select field on top of react-datepicker library
• DateTimeField - date select field integrated with additional input for providing a specific time
• DateTimeOnlyField - time field for time value only

All components are accessible (thanks Chakra UI!) and have support for chakra UI dark mode.

Installation

You need to install all below-mentioned libraries as a peer dependencies of this package.

• React Hook Form
• Chakra UI
• Currency.js
• Day.js
• React Datepicker
• React Number Format
• React Select
• React Text Mask

yarn add react-hook-form chakra-ui/react chakra-ui/icons @emotion/react @emotion/styled framer-motion currency.js dayjs react-datepicker react-number-format react-select react-text-mask
yarn add -D @types/react-datepicker @types/react-text-mask @types/react-select
yarn add react-hook-form-chakra-fields

Usage Examples - TODO

You can always check this project repository to see how to use this library.

Meta

This library was invented with TSDX.