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.