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.
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.
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 | undefined | 'off' | Autocomplete configuration for the form fields See the Mozilla Developer Network docsopens in a new window for more information | |
children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | The children of the FormProvider | ||
highlighted | boolean | undefined | false | If true, all form components in the FormProvider will be highlighted | |
onError | SubmitErrorHandler<any> | undefined | Callback function executed when the form submission fails | ||
onSubmit | SubmitHandler<any> | undefined | Callback function executed when the form is submitted | ||
state | UseForm<any> | The state of the form, including the handleSubmit function | ||
successMessage | string | undefined | Success message to display on form submission |