@availity/mui-controlled-form

Availity MUI Form components integrated with react-hook-form to be used with @availity/element design system.

Documentation

This package extends the Element's Form components with react-hook-form. The goal of this package is to decrease the amount of setup involved with building a form using Element components and react-hook-form. If you would like to use another form library, the raw Element form components are also available.

Live demo and documentation in our Storybook

Availity standards for design and usage can be found in the Availity Design Guide

Installation

Import Through @availity/element (Recommended)

NPM

npm install @availity/element

Yarn

yarn add @availity/element

Direct Import

NPM

This package has a few peer dependencies. Add @mui/material & @emotion/react to your project if not already installed.

npm install @availity/mui-controlled-form

Yarn

yarn add @availity/mui-controlled-form

Usage

Import through @availity/element

import { ControlledTextField } from '@availity/element';

Direct import

import { ControlledTextField } from '@availity/mui-controlled-form';

Form Validation

Form validation can be on a component-by-component basis, or by passing a valid schema and schema resolver. For more information on react-hook-form's schema resolvers see: https://github.com/react-hook-form/resolvers#quickstart