import { FormProvider } from '@uhg-abyss/web/ui/FormProvider';

Usage

Use FormProvider along with the useForm hook in order to better manage your forms and fully utilize the capabilities of form management within Abyss. To achieve this, you will need to wrap all form fields and the submission button with the FormProvider component and provide state through the usage of useForm.

Please see examples below for additional props to pass into the FormProvider and go to useForm for detailed documentation on how to configure your forms and take advantage of all the available features.

Note: The default error message when required is true is minimally acceptable for accessibility. It is highly recommended to customize it to be more specific to the use of the field and form.

Highlighted

Use the highlighted prop to enable a distinct background color when fields are required.

Success message

Use the successMessage prop to provide a default success message to all form input fields.

Note: You will be able to override this prop on each form input component if needed with other components that utilize the successMessage prop.

FormProvider Props

Name	Type	Default	Required	Description
autoComplete	string	'off'	-	Autocomplete configuration for the form fields See the Mozilla Developer Network docs for more information
children	React.ReactNode	-		The children of the FormProvider
highlighted	boolean	false	-	If true, all form components in the FormProvider will be highlighted
onError	SubmitErrorHandler	-	-	Callback function executed when the form submission fails
onSubmit	SubmitHandler	-	-	Callback function executed when the form is submitted
state	UseForm	-		The state of the form, including the handleSubmit function
successMessage	string	-	-	Success message to display on form submission

Below are the link(s) to the relevant GitHub type files:

Abyss.d.ts

FormProvider.types.ts