@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/.ai/patterns/form.md

@@ -0,0 +1,619 @@
+# Form
+
+Use the IressForm component when you want to request, validate and process data from the user.
+
+> **Pattern:** `import { IressForm } from '@iress-oss/ids-components'`
+> **Storybook:** [Form in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_patterns-form--docs)
+
+## Quick Start
+
+```tsx
+import { IressForm } from '@iress-oss/ids-components';
+
+<IressForm heading="Contact details" pattern="short" />
+```
+
+import {
+  ComponentApiExpander,
+  ComponentExample,
+  ComponentOverview,
+} from '@iress-oss/ids-storybook-config';
+
+## Installation
+
+As of version 6, `react-hook-form` has been moved to a peer dependency. You will need to install it alongside `@iress-oss/ids-components` in order to use the `IressForm` or `IressHookForm` component.
+
+```bash
+yarn add @iress-oss/ids-components react-hook-form
+```
+
+## Key concepts
+
+`IressForm` is built on top of [React Hook Forms](https://react-hook-form.com/). This provides you the power of React Hook Forms with the convenience of IDS form components. However, there are some key differences to be aware of as it may affect how you build your forms.
+
+### State management
+
+`IressForm` manages the state of the form, including the form data and validation. This is done using the `useForm` hook from React Hook Forms. This hook provides a way to manage the form state, and provides methods to interact with the form. This was done to simplify the form components, make them more predictable (as the form becomes the single source of truth for all form related data) and improve performance by reducing re-renders (very important for large forms).
+
+Due to this change, there are a few things you should consider during development:
+
+- Avoid using the `useState` hook to manage form state. Instead, use the `useFormContext()` hook from `react-hook-form` or the `ref` of the `IressForm` component to interact with the form state. The initial value of the form can be set using the `defaultValues` prop, but from then on you should be using either the hook or ref to interact with the form state.
+- Avoid using `onChange` handlers on form fields to react to form values. Instead, use the `useWatch` hook from `react-hook-form` to watch the value of a field and conditionally render fields based on the value of another field.
+
+See below an example comparing a version 4 and version 5 `IressForm` when managing form state.
+
+```tsx
+<DiffViewer
+allowModeChange
+oldValue={`import { IressForm, IressField, IressInput, IressCheckboxGroup, IressCheckbox } from '@iress/components';
+
+export const App = () => {
+// We need to create our own state to manage the visibility of the fields, 
+// which means we have two sources of truth potentially making our code harder to maintain
+const [show, setShow] = useState(['name']);
+
+return (
+<IressForm>
+<IressField label="Show fields">
+<IressCheckboxGroup value={show} onChange={(newValues) => setShow(newValues)}>
+<IressCheckbox value="name">Name</IressCheckbox>
+<IressCheckbox value="email">Email</IressCheckbox>
+</IressCheckboxGroup>
+</IressField>
+{show.includes('name') && (
+<IressField label="Name">
+<IressInput name="name" />
+</IressField>
+)}
+{show.includes('email') && (
+<IressField label="Email">
+<IressInput name="email" type="email" />
+</IressField>
+)}
+</IressForm>
+);
+};`}
+newValue={`import { IressForm, IressFormField, IressInput, IressCheckboxGroup, IressCheckbox } from '@iress-oss/ids-components';
+import { useWatch } from 'react-hook-form';
+
+const ConditionalFields = () => {
+// Instead of creating our own state, we can now use the form state via the useWatch hook, 
+// meaning we still have a single source of truth
+const show = useWatch({ name: 'show'});
+
+return (
+<>
+<IressFormField 
+label="Show fields" 
+name="show"
+render={(controlledProps) => (
+<IressCheckboxGroup {...controlledProps}>
+<IressCheckbox value="name">Name</IressCheckbox>
+<IressCheckbox value="email">Email</IressCheckbox>
+</IressCheckboxGroup>
+)}
+/>
+{show?.includes('name') && (
+<IressFormField 
+label="Name" 
+name="name"
+render={(controlledProps) => <IressInput {...controlledProps} />}
+/>
+)}
+{show?.includes('email') && (
+<IressFormField 
+label="Email" 
+name="email"
+render={(controlledProps) => <IressInput {...controlledProps} type="email" />}
+/>
+)}
+</>
+);
+};
+
+export const App = () => (
+<IressForm defaultValues={{ show: ['name'] }}>
+<ConditionalFields /> 
+</IressForm>
+);`}
+/>
+```
+
+[View "StateManagementV4ToV5" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form--state-management-v4to-v5)
+
+### Validation
+
+Validation is now done declaratively using the `rules` prop on the `IressFormField` component. This is based on the [rules available in React Hook Forms](https://www.react-hook-form.com/api/useform/register/#options). This change was made to allow for more complex validation rules to be implemented.
+
+Due to this change, there are a few things you should consider during development:
+
+- If you want validation messages to be shown on form controls, you need to use the `IressFormField` component to wrap around the form control and set the `rules` prop. This will allow the form to manage the validation state of the field.
+- Although you can still use props such as `maxLength` on `IressInput`, these no longer propagate to the form validation. You need to use the `rules` prop to set these validation rules as well, and rely on `maxLength` for the input to stop the user from entering more characters than allowed (a user experience improvement that we definitely recommend).
+- You can no longer override default error messages for the whole form. To override the default messages, you must specify them in the `rules` prop per `IressFormField`.
+
+See below an example comparing a version 4 and version 5 `IressForm` when adding validation rules.
+
+```tsx
+<DiffViewer
+allowModeChange
+oldValue={`import { IressForm, IressField, IressInput, IressButton } from '@iress/components';
+
+export const App = () => (
+<IressForm valueMissing="{{fieldName}} needs to be filled in!">
+<IressField label="Name">
+<IressInput name="name" required />
+</IressField>
+<IressField label="Email">
+<IressInput name="email" maxLength={10} />
+</IressField>
+<IressButton type="submit" mode="primary">
+Sign up
+</IressButton>
+</IressForm>
+);`}
+newValue={`import { IressForm, IressFormField, IressInput, IressButton } from '@iress-oss/ids-components';
+
+export const App = () => (
+<IressForm>
+<IressFormField 
+label="Name"
+name="name"
+render={(controlledProps) => <IressInput {...controlledProps} />}
+rules={{ required: 'Name needs to be filled in!' }}
+/>
+<IressFormField 
+label="Email"
+name="email"
+render={(controlledProps) => <IressInput {...controlledProps} type="email" maxLength={10} />}
+rules={{ maxLength: 10 }}
+/>
+<IressButton type="submit" mode="primary">
+Sign up
+</IressButton>
+</IressForm>
+);`}
+/>
+```
+
+[View "ValidationV4ToV5" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form--validation-v4to-v5)
+
+### Syncing state
+
+For most scenarios, you should use the `onSubmit` event to sync the form data with other state management systems (eg. server, browser storage or state management libraries such as Redux). This event is emitted when the form passes validation, and contains a map of the field names and the data entered by the user.
+
+For more complex scenarios, you may need to sync a field value before the form is submitted. In this case, you can use the `useWatch` hook to watch the value of a field and sync it with your state.
+
+Consider the following for your development:
+
+- Only use other state management systems to fill out the form at the initial render using `defaultValues`. After that, use the `onSubmit` event to sync the form data with your state.
+- If you need to set form with data coming from an external system, use the `ref` of the form to `reset` the form values.
+
+```tsx
+const ref = useRef<FormRef | null>(null);
+const api = useApi();
+
+const handleSubmit = async (data) => {
+  // Sync the form data with your state
+  const details = await api.updateUser(data);
+
+  // Update the form with the new data
+  ref.current?.reset(details);
+};
+
+return (
+  <IressForm onSubmit={handleSubmit} ref={ref}>
+    ...
+  </IressForm>
+);
+```
+
+## Usage
+
+### Patterns
+
+The `IressForm` component supports different patterns to ensure consistency in how forms are displayed depending on the context of the form.
+
+1. `long`: This pattern is used when a form has more than 8 fields. It has the following characteristics:
+   - The `heading` and `actions` are displayed at the top of the form and can be `sticky`, ensuring they are always visible to the user.
+   - The validation errors are displayed when the user blurs out of a field (ie. moves to the next field), ensuring that the user is informed of any errors before submitting the form.
+2. `short`: This is the default pattern and should be used when a form has 8 or fewer fields, usually for familiar data such as the user's login details. It has the following characteristics:
+   - The `heading` is displayed at the top of the for and the `actions` are displayed at the bottom of the form.
+   - The validation errors are displayed when the user submits the form to ensure that the user is not overwhelmed with errors when filling out the form.
+
+**Note:** It is recommended to use the patterns above for new applications, or those doing an overhaul, as they provide a consistent user experience across forms. For older products, please follow the existing patterns in your application to ensure consistency with the rest of the product.
+
+### Fields
+
+Use the `IressFormField` component to create form fields. This component is a layout component that wraps around form controls such as `IressInput`. It provides a consistent layout for form fields, and hooks into the `IressForm` component to provide validation and error handling.
+
+It has three required props:
+
+- `name`: The name of the field, which will be used to identify the field in the form data.
+- `label`: The label for the field.
+- `render`: A render prop that renders the form control. It is passed an object containing the props to be spread onto the form control to allow it to be controlled by the form.
+
+```tsx
+<IressFormField
+  name="email"
+  label="Email"
+  render={(controlledProps) => <IressInput {...controlledProps} type="email" />}
+/>
+```
+
+#### Supported form controls
+
+Here are some examples of how to use `IressFormField` with different form controls. If you are using a form control that has multiple inputs inside (for example, `IressCheckboxGroup`), you can use `IressFormFieldset`, which changes the HTML structure to use a `fieldset` and `legend` element to group the inputs.
+
+```tsx
+<IressForm heading="All supported form fields" pattern="long" />
+```
+
+[View "Fields" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form--fields)
+
+### Supplementary content
+
+The `renderSupplementary` prop allows you to render additional content alongside the field that has access to the field props and state. This is useful for displaying dynamic information such as character counters, password strength meters, or custom help text that responds to user input.
+
+The render function receives two arguments:
+
+1. `field`: An object containing the field props (id, name, value, onChange, onBlur, ref)
+2. `state`: An object containing the field state (fieldState, formState)
+
+Common use cases include:
+
+- **Character counters**: Display the current character count and maximum allowed
+- **Password strength indicators**: Show password strength based on the current value
+- **Dynamic hints**: Provide contextual help based on the field value
+- **Custom validation feedback**: Display real-time validation feedback separate from error messages
+
+```tsx
+<IressInput
+{...controlledProps}
+rows={3}
+maxLength={200}
+placeholder="Type your comment here..."
+/>
+```
+
+[View "RenderSupplementary" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form-field--render-supplementary)
+
+### Rules
+
+Use the `rules` prop on the `IressFormField` component to add validation rules. These are based on the [rules available in React Hook Forms](https://www.react-hook-form.com/api/useform/register/#options). The following rules are supported.
+
+**Note:** In version 5, you can no longer override default error messages for the whole form. To override the default messages, you must specify them in the `rules` prop per `IressFormField`.
+
+#### `required`
+
+A boolean which, if `true`, indicates that the input must have a value before the form can be submitted. You can assign a string to return a custom error message.
+
+```tsx
+<IressFormRules element="IressInput" />
+```
+
+[View "Required" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form-rules--required)
+
+#### `maxLength`
+
+The maximum character length of the value to accept for this input.
+
+**Notes**
+
+- For `IressInput`, you should also set the `maxLength` to stop the user from entering more characters than allowed.
+- Only applies to: `IressAutocomplete`, `IressInput`, `IressRadioGroup` and `IressSelect`.
+
+```tsx
+<IressFormRules element="IressInput" />
+```
+
+[View "MaxLength" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form-rules--max-length)
+
+#### `minLength`
+
+The minimum character length of the value to accept for this input.
+
+**Notes**
+
+- For `IressInput`, you should also set the `minLength` to stop the user from entering more characters than allowed.
+- Only applies to: `IressAutocomplete`, `IressInput`, `IressRadioGroup` and `IressSelect`.
+
+```tsx
+<IressFormRules element="IressInput" />
+```
+
+[View "MinLength" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form-rules--min-length)
+
+#### `max`
+
+The maximum number to accept for this input.
+
+**Notes**
+
+- Only applies to: `IressAutocomplete`, `IressInput`, `IressRadioGroup` and `IressSelect`.
+
+```tsx
+<IressFormRules element="IressInput" />
+```
+
+[View "Max" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form-rules--max)
+
+#### `min`
+
+The minimum number to accept for this input.
+
+**Notes**
+
+- Only applies to: `IressAutocomplete`, `IressInput`, `IressRadioGroup` and `IressSelect`.
+
+```tsx
+<IressFormRules element="IressInput" />
+```
+
+[View "Min" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form-rules--min)
+
+#### `pattern`
+
+The accepted regex pattern for the input.
+
+**Notes**
+
+- Only applies to: `IressAutocomplete`, `IressInput`, `IressRadioGroup` and `IressSelect`.
+
+[View "Pattern" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form-rules--pattern)
+
+#### `minDate`
+
+The minimum date to accept for this input.
+
+**Note:** This is a custom rule created for `IressForm` and its sub-components. It will translate the rule into a `validate` rule for react-hook-forms. It will not work with a `validate` function, only if you set the `validate` prop to an `object` of functions.
+
+```tsx
+<IressFormRules element="IressInputDate" />
+```
+
+[View "MinDate" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form-rules--min-date)
+
+#### `maxDate`
+
+The maximum date to accept for this input.
+
+**Note:** This is a custom rule created for `IressForm` and its sub-components. It will translate the rule into a `validate` rule for react-hook-forms. It will not work with a `validate` function, only if you set the `validate` prop to an `object` of functions.
+
+```tsx
+<IressFormRules element="IressInputDate" />
+```
+
+[View "MaxDate" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form-rules--max-date)
+
+#### `email`
+
+Ensures the input is a valid email address.
+
+**Note:** This is a custom rule created for `IressForm` and its sub-components. It will translate the rule into a `validate` rule for react-hook-forms. It will not work with a `validate` function, only if you set the `validate` prop to an `object` of functions.
+
+```tsx
+<IressFormRules element="IressInput" />
+```
+
+[View "Email" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form-rules--email)
+
+#### `validate`
+
+You can pass a callback function as the argument to validate, or you can pass an object of callback functions to validate against all of them. This function will be executed on its own without depending on other validation rules included.
+
+**Notes**
+
+- for `object` or `array` input data, it's recommended to use the validate function for validation as the other rules mostly apply to `string`, `string[]`, `number` and `boolean` data types.
+
+```tsx
+<IressFormRules 2 element="IressCheckboxGroup" />
+```
+
+[View "Validate" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form-rules--validate)
+
+### Handling submission
+
+When the form passes validation (if not disabled), the `onSubmit` event is emitted. Its event details contain a map of the field names and the data entered by the user.
+
+```tsx
+<FormSubmission />
+```
+
+[View "HandlingSubmission" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form--handling-submission)
+
+## Behaviour
+
+- Initial form validation is done when the user first submits the form. This allows them to focus on entering data without being overwhelmed by validation errors.
+- If there are validation errors on submission, they will be shown at the form level as a summary, as well as per field. Only the first failing error will be displayed per field.
+- After the first submission, fields are validated on change, to provide users instant feedback as they are now at the validation phase.
+
+**Note:** The default user experience regarding validation is different to previous versions of IDS. This change was done to align IDS with the typical user experience found in other applications. If you would like to change the behaviour to be more consistent with the original IDS, set the `mode` prop of the form to `onBlur`.
+
+## Examples
+
+### Pre-fill the form
+
+You can set the `defaultValues` prop to pre-fill the form values.
+
+[View "DefaultValues" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form--default-values)
+
+### Custom error handling
+
+The `onError` prop allows you to listen to any field errors. It takes two arguments. The first is a map of the field name and an object containing the first error message and type. The second is a ref to the original element that caused the error (the ref of the underlying input).
+
+One use case for this prop is to create your own visible error summary at the top of the form, or to log errors to an external service.
+
+```tsx
+<CustomErrorHandlingForm />
+```
+
+[View "CustomErrorHandling" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form--custom-error-handling)
+
+### `values`
+
+If you would like more control over each value of the form, you should use the `values` prop. This will make the form controlled, meaning it will rely completely on the `values` state to render the value of each field. You will need to use the `onSubmit` prop to sync the form value with your state.
+
+Use cases where you may need the `values` prop:
+
+- Syncing with a server once the values have been processed
+- Syncing the value with browser storage
+
+**Note:** `values` takes precedence over `defaultValues`. To ensure your form state is predictable, it is best to only use one prop to manage form values.
+
+```tsx
+<ControlledForm />
+```
+
+[View "Values" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form--values)
+
+### Disable validation
+
+Disabling validation is not possible with the `IressForm` component. In cases where you do need to disable validation, please consider the following:
+
+1. Use a non-submitting button to save a draft (eg. `<IressButton type="button">Save as draft</IressButton>`). Then you can use the `ref` of the form to get the form data.
+2. Use a native `form` element, and customise the error handling.
+
+Here we have an example showcasing option one.
+
+```tsx
+<DisableValidationForm />
+```
+
+[View "DisableValidation" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form--disable-validation)
+
+### Resetting the form
+
+You can reset the form using the `ref` of the form. You must provide a `defaultValues` prop that contains all the fields in the form to ensure it resets properly.
+
+**Note:** `<button type="reset" />` does not work with `IressForm`. You need to add an `onClick` prop to the button and use the `ref.reset` method to reset the form.
+
+```tsx
+<FormReset />
+```
+
+[View "ResetForm" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form--reset-form)
+
+### Read only
+
+You can pass the `readOnly` prop to remove the asterisk symbol (\*) even when the field is `required`, and that field will be exempted from validation.
+
+```tsx
+<IressStack gap="md">
+<IressText>
+<h2>Excludes read-only validation</h2>
+<p>Try hitting submit to see that only email is being validated</p>
+</IressText>
+<IressForm />
+</IressStack>
+```
+
+[View "ExcludeReadOnlyValidation" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form--exclude-read-only-validation)
+
+## `IressHookForm`
+
+`IressHookForm` is the underlying component that `IressForm` is built upon. It has a single required prop, `form`, which expects the return value of the `useForm` hook from React Hook Forms.
+
+It has been exposed to consumers to allow you to have complete control of your React Hook Forms instance whilst still taking advantage of the IDS form components.
+
+Some use cases:
+
+1. You may need to use the `useForm` hook in a parent component to share the form state with multiple child components.
+2. You would like to use the return value of the `useForm` hook without having to use a ref to access the `react-hook-form` api.
+
+```tsx
+<HookFormExample />
+```
+
+[View "HookForm" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-hook-form--hook-form)
+
+## `IressFormValidationSummary`
+
+`IressFormValidationSummary` is the error summary component that is added to the top of the form for screen readers to announce validation errors. It is automatically added to the form when there are validation errors, but you can also use it independently to create your own error summary, usually used if you want a visible error summary at the top of the form.
+
+```tsx
+<IressForm heading="Try hitting submit to see the validation summary" />
+```
+
+[View "ValidationSummary" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_patterns-form--validation-summary)
+
+## Migration to version 5 and beyond
+
+The previous form components contained a lot of logic to translate the HTML5 validation API to a format that matched the design system’s guidelines. This allowed users to use the default props of input such as `pattern` and `required`, and be assured that the `IressField` would display errors accordingly.
+
+Although this worked for simple forms, it did not work for forms which had complex business requirements. This was due to the logic inside the form components being hard to override. Additionally, it was seemingly impossible to implement the business requirements using the HTML5 validation API, which itself is very restricted.
+
+In version 5 we have decided to provide two alternative methods of using form components to better accommodate our consumer’s needs.
+
+The validation logic has been stripped from all of the existing form components. They are now closer to their native implementation, with a few customisations to match the IDS guidelines. IressField has transformed into a layout component to allow you to lay out form fields consistent with IDS guidelines, using your own validation tools.
+
+Automated validation is now solely contained in `IressForm` and `IressFormField`, using [React Hook Form](https://react-hook-form.com/docs/useform) under the hood to simplify maintenance.
+
+## Testing
+
+Unfortunately due to the asynchronous nature of React Hook Form validation, `IressForm` still needs to be tested using `screen.findBy` queries (at least in the first query after render). If `findBy` is not used, you will start to see the dreaded `act warnings`. For more information on testing IressForm, please refer to the (React Hook Form testing documentation)[https://react-hook-form.com/advanced-usage#TestingForm]
+
+Here is an example of testing a form submission.
+
+```tsx
+render(
+  <IressForm>
+    <IressFormField
+      label="Email"
+      name="email"
+      rules={{ required: true }}
+      render={(controlledProps) => (
+        <IressInput {...controlledProps} type="email" />
+      )}
+    />
+    <IressButton type="submit">Submit</IressButton>
+  </IressForm>,
+);
+
+// May be needed sometimes to get over the act warning
+await screen.getByRole('form');
+
+const emailInput = screen.getByRole('textbox');
+const submitButton = screen.getByRole('button', { name: 'Submit' });
+
+await userEvent.click(submitButton);
+
+// Errors are asynchronous, so we need to wait for them to appear
+const summaryError = await screen.findByText(
+  'There was a problem submitting this form',
+);
+expect(summaryError).toBeInTheDocument();
+```
+
+## Caveat
+
+### Properly resetting fields
+
+When resetting fields that accept non-string values (like `IressSelect`), you should reset them to `null` or `undefined` instead of an empty string. This is because the underlying component is strictly typed and expects a specific value type.
+
+**Problem:**
+
+```tsx
+const { resetField } = useFormContext();
+
+resetField('rich-select', {
+  label: '',
+  value: '',
+});
+```
+
+In this case, it will look like it cleared the field, but actually it has not. This is obvious with a `placeholder` set, as it will not show the placeholder.
+
+**Solution:**
+Override the `onChange` handler to pass the actual value as a second parameter:
+
+```tsx
+const { resetField } = useFormContext();
+
+resetField('rich-select', null); // or undefined
+```
+
+This will properly reset the field to null and clear the field value.
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_patterns-form--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_patterns-form--docs)*