@iress-oss/ids-mcp-server 5.15.0 → 6.0.0-alpha.1

package/generated/docs/components-form-docs.md

@@ -1,2410 +0,0 @@
-[](#form)Form
-=============
-
-Overview
---------
-
-Use the `IressForm` component when you want to request, validate and process data from the user.
-
-\*Required Name
-
-\*Required Email address
-
-Sign up
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressForm\>
-  <IressStack gutter\="md"\>
-    <IressFormField
-      label\="Name"
-      name\="name"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        required: 'Name is required'
-      }}
-    />
-    <IressFormField
-      label\="Email address"
-      name\="email"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        minLength: {
-          message: 'Use a longer email address',
-          value: 6
-        },
-        required: 'Email is required'
-      }}
-    />
-    <IressButton
-      mode\="primary"
-      type\="submit"
-    \>
-      Sign up    </IressButton\>
-  </IressStack\>
-</IressForm\>
-
-Copy
-
-[](#key-concepts)Key concepts
------------------------------
-
-As of version 5, `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)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 `IressForm.useForm` hook 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 `IressForm.useWatch` hook 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.
-
-Mode
-
-DiffOldNew
-
-<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { IressForm, IressField, IressInput, IressCheckboxGroup, IressCheckbox } from '@iress/components';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { IressForm, IressFormField, IressInput, IressCheckboxGroup, IressCheckbox } from '@iress-oss/ids-components';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">export const App = () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">const ConditionalFields = () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // We need to create our own state to manage the visibility of the fields, </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // Instead of creating our own state, we can now use the form state via the useWatch hook, </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // which means we have two sources of truth potentially making our code harder to maintain</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // meaning we still have a single source of truth</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const [show, setShow] = useState(['name']);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const show = IressForm.useWatch({ name: 'show'});</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  return (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">      &lt;IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    &lt;&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        &lt;IressField label="Show fields"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;IressCheckboxGroup value={show} onChange={(newValues) =&gt; setShow(newValues)}&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        label="Show fields" </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        name="show"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        render={(controlledProps) =&gt; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          &lt;IressCheckboxGroup {...controlledProps}&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">            &lt;IressCheckbox value="name"&gt;Name&lt;/IressCheckbox&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">            &lt;IressCheckbox value="email"&gt;Email&lt;/IressCheckbox&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">          &lt;/IressCheckboxGroup&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        {show.includes('name') &amp;&amp; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;IressField label="Name"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      {show?.includes('name') &amp;&amp; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">            &lt;IressInput name="name" /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          label="Name" </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          name="name"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        {show.includes('email') &amp;&amp; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          render={(controlledProps) =&gt; &lt;IressInput {...controlledProps} /&gt;}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;IressField label="Email"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">            &lt;IressInput name="email" type="email" /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">          &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      {show?.includes('email') &amp;&amp; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">        )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">      &lt;/IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          label="Email" </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          name="email"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">          render={(controlledProps) =&gt; &lt;IressInput {...controlledProps} type="email" /&gt;}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">        /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      )}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">     &lt;/&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  );</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">};</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-10regm7-empty-line css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">export const App = () =&gt; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  &lt;IressForm defaultValues={{ show: ['name'] }}&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    &lt;ConditionalFields /&gt; </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  &lt;/IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">);</pre></td></tr></tbody></table>
-
-### [](#validation)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.
-
-Mode
-
-DiffOldNew
-
-<table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { IressForm, IressField, IressInput, IressButton } from '@iress/components';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { IressForm, IressFormField, IressInput, IressButton } from '@iress-oss/ids-components';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">export const App = () =&gt; (</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  &lt;IressForm valueMissing="{{fieldName}} needs to be filled in!"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  &lt;IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    &lt;IressField label="Name"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">      &lt;IressInput name="name" required /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      label="Name"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      name="name"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    &lt;IressField label="Email"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      render={(controlledProps) =&gt; &lt;IressInput {...controlledProps} /&gt;}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">      &lt;IressInput name="email" maxLength={10} /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      rules={{ required: 'Name needs to be filled in!' }}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    &lt;/IressField&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    &lt;IressFormField </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      label="Email"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      name="email"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      render={(controlledProps) =&gt; &lt;IressInput {...controlledProps} type="email" maxLength={10} /&gt;}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">      rules={{ maxLength: 10 }}</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">    /&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    &lt;IressButton type="submit" mode="primary"&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">      Sign up</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">    &lt;/IressButton&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  &lt;/IressForm&gt;</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">);</pre></td></tr></tbody></table>
-
-### [](#syncing-state)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 `IressForm.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.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-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\>
-);
-
-Copy
-
-[](#usage)Usage
----------------
-
-### [](#fields)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.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-<IressFormField
-  name\="email"
-  label\="Email"
-  render\={(controlledProps) \=> <IressInput {...controlledProps} type\="email" />}
-/>
-
-Copy
-
-#### [](#supported-form-controls)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.
-
-\*Required Name
-
-\*Required Date
-
-\*Required Gender
-
-SelectMaleFemaleOther
-
-\*Required Gender with icons
-
-MaleFemaleOther
-
-\*Required Hobbies
-
-Reading
-
-Writing
-
-\*Required Food of preference
-
-Steak
-
-Fish
-
-Salad
-
-\*Required I agree to the terms and conditions
-
-\*Required Your star wars name
-
-Type to copy an existing character's name
-
-\*Required Your star wars sidekick
-
-None selected
-
-\*Required Star wars crew
-
-None selected
-
-\*Required What's your pain level?
-
-0
-
-\*Required Favourite email domains
-
-Sign up
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressForm\>
-  <IressStack gutter\="md"\>
-    <IressFormField
-      label\="Name"
-      name\="name"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        required: true
-      }}
-    />
-    <IressFormField
-      label\="Date"
-      name\="date"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        required: true
-      }}
-    />
-    <IressFormField
-      label\="Gender"
-      name\="gender"
-      render\={(controlledProps) \=> (
-          <IressSelect {...controlledProps} placeholder\="Select"\>
-            <option\>Male</option\>
-            <option\>Female</option\>
-            <option\>Other</option\>
-          </IressSelect\>
-        )}
-      rules\={{
-        required: true
-      }}
-    />
-    <IressFormField
-      label\="Gender with icons"
-      name\="gender-with-icons"
-      render\={(controlledProps) \=> (
-      <IressRichSelect
-        {...controlledProps}
-        options\={\[
-          {
-            label: 'Male',
-            value: 'male',
-            prepend: <IressIcon name\="mars" />,
-          },
-          {
-            label: 'Female',
-            value: 'female',
-            prepend: <IressIcon name\="venus" />,
-          },
-          {
-            label: 'Other',
-            value: 'other',
-            prepend: <IressIcon name\="otter" />,
-          },
-        \]} />
-      )}
-      rules\={{
-        required: true
-      }}
-    />
-    <IressFormFieldset
-      label\="Hobbies"
-      name\="hobbies"
-      render\={(controlledProps) \=> (
-      <IressCheckboxGroup {...controlledProps}\>
-        <IressCheckbox value\="reading"\>Reading</IressCheckbox\>
-        <IressCheckbox value\="writing"\>Writing</IressCheckbox\>
-      </IressCheckboxGroup\>
-    )}
-      rules\={{
-        required: 'Select at least one hobby'
-      }}
-    />
-    <IressFormFieldset
-      label\="Food of preference"
-      name\="food"
-      render\={(controlledProps) \=> (
-      <IressRadioGroup {...controlledProps}\>
-        <IressRadio value\="steak"\>Steak</IressRadio\>
-        <IressRadio value\="fish"\>Fish</IressRadio\>
-        <IressRadio value\="salad"\>Salad</IressRadio\>
-      </IressRadioGroup\>
-    )}
-      rules\={{
-        required: 'Select at least one food of preference'
-      }}
-    />
-    <IressFormField
-      label\="I agree to the terms and conditions"
-      name\="terms"
-      render\={(controlledProps) \=> (
-      <IressCheckbox {...controlledProps} defaultChecked\={controlledProps.value} />
-    )}
-      rules\={{
-        required: 'You need to agree to the terms and conditions before proceeding'
-      }}
-    />
-    <IressFormField
-      hint\="Type to copy an existing character's name"
-      label\="Your star wars name"
-      name\="star\_wars\_name"
-      render\={(controlledProps) \=> (
-      <IressAutocomplete
-        {...controlledProps}
-        options\={searchStarWarsCharacters}
-        onClear\={(event) \=> {
-          controlledProps.onChange(event);
-        }}
-      />
-    )}
-      rules\={{
-        required: true
-      }}
-    />
-    <IressFormField
-      label\="Your star wars sidekick"
-      name\="star\_wars\_sidekick"
-      render\={(controlledProps) \=> (
-      <IressCombobox
-        {...controlledProps}
-        options\={searchStarWarsCharacters}
-        onClear\={(event) \=> {
-          controlledProps.onChange(event);
-        }}
-      />
-    )}
-      rules\={{
-        required: true
-      }}
-    />
-    <IressFormField
-      label\="Star wars crew"
-      name\="star\_wars\_crew"
-      render\={(controlledProps) \=> (
-      <IressMultiCombobox
-        {...controlledProps}
-        options\={searchStarWarsCharacters}
-        onClear\={(event) \=> {
-          controlledProps.onChange(event);
-        }}
-      />
-    )}
-      rules\={{
-        required: true
-      }}
-    />
-    <IressFormField
-      label\="What's your pain level?"
-      name\="pain\_level"
-      render\={(controlledProps) \=> <IressSlider {...controlledProps} />}
-      rules\={{
-        required: true
-      }}
-    />
-    <IressFormField
-      label\="Favourite email domains"
-      name\="email\_domains"
-      render\={(controlledProps) \=> <IressTagInput {...controlledProps} />}
-      rules\={{
-        required: true
-      }}
-    />
-    <IressButton
-      mode\="primary"
-      type\="submit"
-    \>
-      Sign up    </IressButton\>
-  </IressStack\>
-</IressForm\>
-
-Copy
-
-### [](#rules)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)`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.
-
-\*Required Default message
-
-\*Required Custom message
-
-Validate
-
-Show code
-
-#### [](#maxlength)`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`.
-
-Default message
-
-Enter a maximum length of 5 characters
-
-Custom message
-
-Enter a maximum length of 5 characters
-
-Validate
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressForm\>
-  <IressStack gutter\="lg"\>
-    <IressFormField
-      hint\="Enter a maximum length of 5 characters"
-      label\="Default message"
-      name\="IressInput-default"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        maxLength: 5
-      }}
-    />
-    <IressFormField
-      hint\="Enter a maximum length of 5 characters"
-      label\="Custom message"
-      name\="IressInput-custom"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        maxLength: {
-          message: 'Please enter a max length of 5 characters!',
-          value: 5
-        }
-      }}
-    />
-    <IressButton
-      mode\="primary"
-      type\="submit"
-    \>
-      Validate    </IressButton\>
-  </IressStack\>
-</IressForm\>
-
-Copy
-
-#### [](#minlength)`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`.
-
-Default message
-
-Enter a minimum length of 7 characters
-
-Custom message
-
-Enter a minimum length of 7 characters
-
-Validate
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressForm\>
-  <IressStack gutter\="lg"\>
-    <IressFormField
-      hint\="Enter a minimum length of 7 characters"
-      label\="Default message"
-      name\="IressInput-default"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        minLength: 7
-      }}
-    />
-    <IressFormField
-      hint\="Enter a minimum length of 7 characters"
-      label\="Custom message"
-      name\="IressInput-custom"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        minLength: {
-          message: 'Please enter a min length of 7 characters!',
-          value: 7
-        }
-      }}
-    />
-    <IressButton
-      mode\="primary"
-      type\="submit"
-    \>
-      Validate    </IressButton\>
-  </IressStack\>
-</IressForm\>
-
-Copy
-
-#### [](#max)`max`
-
-The maximum number to accept for this input.
-
-**Notes**
-
-*   Only applies to: `IressAutocomplete`, `IressInput`, `IressRadioGroup` and `IressSelect`.
-
-Default message
-
-Select a maximum of 2
-
-Custom message
-
-Select a maximum of 2
-
-Validate
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressForm\>
-  <IressStack gutter\="lg"\>
-    <IressFormField
-      hint\="Select a maximum of 2"
-      label\="Default message"
-      name\="IressInput-default"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        max: 2
-      }}
-    />
-    <IressFormField
-      hint\="Select a maximum of 2"
-      label\="Custom message"
-      name\="IressInput-custom"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        max: {
-          message: 'Please enter a max of 2!',
-          value: 2
-        }
-      }}
-    />
-    <IressButton
-      mode\="primary"
-      type\="submit"
-    \>
-      Validate    </IressButton\>
-  </IressStack\>
-</IressForm\>
-
-Copy
-
-#### [](#min)`min`
-
-The minimum number to accept for this input.
-
-**Notes**
-
-*   Only applies to: `IressAutocomplete`, `IressInput`, `IressRadioGroup` and `IressSelect`.
-
-Default message
-
-Select a minimum of 20
-
-Custom message
-
-Select a minimum of 20
-
-Validate
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressForm\>
-  <IressStack gutter\="lg"\>
-    <IressFormField
-      hint\="Select a minimum of 20"
-      label\="Default message"
-      name\="IressInput-default"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        min: 20
-      }}
-    />
-    <IressFormField
-      hint\="Select a minimum of 20"
-      label\="Custom message"
-      name\="IressInput-custom"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        min: {
-          message: 'Please enter a min of 20!',
-          value: 20
-        }
-      }}
-    />
-    <IressButton
-      mode\="primary"
-      type\="submit"
-    \>
-      Validate    </IressButton\>
-  </IressStack\>
-</IressForm\>
-
-Copy
-
-#### [](#pattern)`pattern`
-
-The accepted regex pattern for the input.
-
-**Notes**
-
-*   Only applies to: `IressAutocomplete`, `IressInput`, `IressRadioGroup` and `IressSelect`.
-
-Default message
-
-Enter a valid email address
-
-Custom message
-
-Enter a valid email address
-
-Validate
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressForm\>
-  <IressStack gutter\="lg"\>
-    <IressFormField
-      hint\="Enter a valid email address"
-      label\="Default message"
-      name\="IressInput-default"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        pattern: /^\[a-zA-Z0-9.!#$%&'\*+/=?^\_\`{|}~-\]+@\[a-zA-Z0-9\](?:\[a-zA-Z0-9-\]{0,61}\[a-zA-Z0-9\])?(?:\\.\[a-zA-Z0-9\](?:\[a-zA-Z0-9-\]{0,61}\[a-zA-Z0-9\])?)\*$/
-      }}
-    />
-    <IressFormField      hint="Enter a valid email address"      label="Custom message"      name="IressInput-custom"      render={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules={{
-        pattern: {
-          message: 'Please enter a valid email address!',
-          value: /^\[a-zA-Z0-9.!#$%&'\*+/=?^\_\`{|}~-\]+@\[a-zA-Z0-9\](?:\[a-zA-Z0-9-\]{0,61}\[a-zA-Z0-9\])?(?:\\.\[a-zA-Z0-9\](?:\[a-zA-Z0-9-\]{0,61}\[a-zA-Z0-9\])?)\*$/
-        }
-      }}
-    />    <IressButton
-      mode\="primary"
-      type\="submit"
-    \>
-      Validate    </IressButton\>
-  </IressStack\>
-</IressForm\>
-
-Copy
-
-#### [](#mindate)`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.
-
-Default message
-
-Enter a date after today
-
-Custom message
-
-Enter a date after today
-
-Validate
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressForm\>
-  <IressStack gutter\="lg"\>
-    <IressFormField
-      hint\="Enter a date after today"
-      label\="Default message"
-      name\="IressInputDate-default"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        minDate: new Date('2025-06-27T03:58:57.380Z')
-      }}
-    />
-    <IressFormField
-      hint\="Enter a date after today"
-      label\="Custom message"
-      name\="IressInputDate-custom"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        minDate: {
-          message: 'Please enter a date after today!',
-          value: new Date('2025-06-27T03:58:57.380Z')
-        }
-      }}
-    />
-    <IressButton
-      mode\="primary"
-      type\="submit"
-    \>
-      Validate    </IressButton\>
-  </IressStack\>
-</IressForm\>
-
-Copy
-
-#### [](#maxdate)`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.
-
-Default message
-
-Enter a date before today
-
-Custom message
-
-Enter a date before today
-
-Validate
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressForm\>
-  <IressStack gutter\="lg"\>
-    <IressFormField
-      hint\="Enter a date before today"
-      label\="Default message"
-      name\="IressInputDate-default"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        maxDate: new Date('2025-06-27T03:58:57.380Z')
-      }}
-    />
-    <IressFormField
-      hint\="Enter a date before today"
-      label\="Custom message"
-      name\="IressInputDate-custom"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        maxDate: {
-          message: 'Please enter a date before today!',
-          value: new Date('2025-06-27T03:58:57.380Z')
-        }
-      }}
-    />
-    <IressButton
-      mode\="primary"
-      type\="submit"
-    \>
-      Validate    </IressButton\>
-  </IressStack\>
-</IressForm\>
-
-Copy
-
-#### [](#email)`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.
-
-Default message
-
-Enter an email address
-
-Custom message
-
-Enter an email address
-
-Validate
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressForm\>
-  <IressStack gutter\="lg"\>
-    <IressFormField
-      hint\="Enter an email address"
-      label\="Default message"
-      name\="IressInput-default"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        email: true
-      }}
-    />
-    <IressFormField
-      hint\="Enter an email address"
-      label\="Custom message"
-      name\="IressInput-custom"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        email: 'Please enter a valid email address!'
-      }}
-    />
-    <IressButton
-      mode\="primary"
-      type\="submit"
-    \>
-      Validate    </IressButton\>
-  </IressStack\>
-</IressForm\>
-
-Copy
-
-#### [](#validate)`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.
-
-Default message
-
-If checkbox, click two items to pass. Anything else, make sure it is Google.
-
-Reading
-
-Writing
-
-Custom message
-
-If checkbox, click two items to pass. Anything else, make sure it is Google.
-
-Reading
-
-Writing
-
-Validate
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressForm\>
-  <IressStack gutter\="lg"\>
-    <IressFormFieldset
-      hint\="If checkbox, click two items to pass. Anything else, make sure it is Google."
-      label\="Default message"
-      name\="IressCheckboxGroup-default"
-      render\={(controlledProps) \=> (
-      <IressCheckboxGroup {...controlledProps}\>
-        <IressCheckbox value\="reading"\>Reading</IressCheckbox\>
-        <IressCheckbox value\="writing"\>Writing</IressCheckbox\>
-      </IressCheckboxGroup\>
-    )}
-      rules\={{
-        validate: {
-          atLeastTwoItems: (value) \=> Array.isArray(value) ? value.length \>= 2 : true,
-          isGoogle: (value) \=> Array.isArray(value) ? true : value \=== "Google"
-        }
-      }}
-    />
-    <IressFormFieldset
-      hint\="If checkbox, click two items to pass. Anything else, make sure it is Google."
-      label\="Custom message"
-      name\="IressCheckboxGroup-custom"
-      render\={(controlledProps) \=> (
-      <IressCheckboxGroup {...controlledProps}\>
-        <IressCheckbox value\="reading"\>Reading</IressCheckbox\>
-        <IressCheckbox value\="writing"\>Writing</IressCheckbox\>
-      </IressCheckboxGroup\>
-    )}
-      rules\={{
-        validate: {
-          atLeastTwoItems: (value) \=> (Array.isArray(value) ? value.length \>= 2 : true) || "Please select at least two items!",
-          isGoogle: (value) \=> (Array.isArray(value) ? true : value \=== "Google") || "I guess you are not evil!"
-        }
-      }}
-    />
-    <IressButton
-      mode\="primary"
-      type\="submit"
-    \>
-      Validate    </IressButton\>
-  </IressStack\>
-</IressForm\>
-
-Copy
-
-### [](#handling-submission)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.
-
-\*Required Name
-
-\*Required Email address
-
-Sign up
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  IressTable,
-  IressFormProps,
-  IressForm,
-  IressModal,
-  IressFormField,
-  IressInput,
-  IressStack,
-  IressButton,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-interface FieldValues {
-  name?: string;
-  email?: string;
-}
-export const FormSubmission \= () \=> {
-  const \[submitted, setSubmitted\] \= useState<FieldValues | undefined\>(
-    undefined,
-  );
-  return (
-    <IressForm  onSubmit\={(data) \=> setSubmitted(data)}\>
-      <IressStack gutter\="md"\>
-        <IressFormField
-          label\="Name"
-          name\="name"
-          render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-          rules\={{
-            required: 'Name is required',
-          }}
-        />
-        <IressFormField
-          label\="Email address"
-          name\="email"
-          render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-          rules\={{
-            minLength: {
-              message: 'Use a longer email address',
-              value: 6,
-            },
-            required: 'Email is required',
-          }}
-        />
-        <IressButton mode\="primary" type\="submit"\>
-          Sign up        </IressButton\>
-      </IressStack\>
-      <IressModal
-        show\={!!submitted}
-        onShowChange\={(show) \=> !show && setSubmitted(undefined)}
-      \>
-        <IressTable
-          caption\="Submitted details"
-          rows\={Object.entries(submitted ?? {}).map((entry) \=> ({
-            name: entry\[0\],
-            value: JSON.stringify(entry\[1\], null, 2),
-          }))}
-        />
-      </IressModal\>
-    </IressForm\>
-  );
-};
-
-Copy
-
-### [](#read-only)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.
-
-Try hitting submit to see the validation summary: only email is being validated
--------------------------------------------------------------------------------
-
-Name
-
-Luke Skywalker
-
-\*Required Email address
-
-Sign up
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gutter\="md"\>
-  <IressText element\="h2"\>
-    Try hitting submit to see the validation summary: only email is being validated  </IressText\>
-  <IressForm\>
-    <IressStack gutter\="md"\>
-      <IressFormField
-        label\="Name"
-        name\="name"
-        readOnly
-        render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-        rules\={{
-          required: 'Name is required'
-        }}
-      />
-      <IressFormField
-        label\="Email address"
-        name\="email"
-        render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-        rules\={{
-          minLength: {
-            message: 'Use a longer email address',
-            value: 6
-          },
-          required: 'Email is required'
-        }}
-      />
-      <IressButton
-        mode\="primary"
-        type\="submit"
-      \>
-        Sign up      </IressButton\>
-    </IressStack\>
-  </IressForm\>
-</IressStack\>
-
-Copy
-
-[](#behaviour)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)Examples
----------------------
-
-### [](#validation-summary)Validation summary
-
-If errors are present, they are displayed in a summary at the top of the page. This can be customised using the `errorSummaryHeading` prop.
-
-Try hitting submit to see the validation summary
-------------------------------------------------
-
-\*Required Name
-
-\*Required Email address
-
-Sign up
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gutter\="md"\>
-  <IressText element\="h2"\>
-    Try hitting submit to see the validation summary  </IressText\>
-  <IressForm errorSummaryHeading\="We have seen the following errors in your submission..."\>
-    <IressStack gutter\="md"\>
-      <IressFormField
-        label\="Name"
-        name\="name"
-        render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-        rules\={{
-          required: 'Name is required'
-        }}
-      />
-      <IressFormField
-        label\="Email address"
-        name\="email"
-        render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-        rules\={{
-          minLength: {
-            message: 'Use a longer email address',
-            value: 6
-          },
-          required: 'Email is required'
-        }}
-      />
-      <IressButton
-        mode\="primary"
-        type\="submit"
-      \>
-        Sign up      </IressButton\>
-    </IressStack\>
-  </IressForm\>
-</IressStack\>
-
-Copy
-
-### [](#hidden-validation-summary)Hidden validation summary
-
-Use the `hiddenErrorSummary` prop to hide the summary altogether, and only show the errors on the fields. This is only recommended for short forms, for long forms it is recommended to keep the error summary shown for best accessibility.
-
-Try hitting submit to see the errors only on the fields
--------------------------------------------------------
-
-\*Required Name
-
-\*Required Email address
-
-Sign up
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gutter\="md"\>
-  <IressText element\="h2"\>
-    Try hitting submit to see the errors only on the fields  </IressText\>
-  <IressForm hiddenErrorSummary\>
-    <IressStack gutter\="md"\>
-      <IressFormField
-        label\="Name"
-        name\="name"
-        render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-        rules\={{
-          required: 'Name is required'
-        }}
-      />
-      <IressFormField
-        label\="Email address"
-        name\="email"
-        render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-        rules\={{
-          minLength: {
-            message: 'Use a longer email address',
-            value: 6
-          },
-          required: 'Email is required'
-        }}
-      />
-      <IressButton
-        mode\="primary"
-        type\="submit"
-      \>
-        Sign up      </IressButton\>
-    </IressStack\>
-  </IressForm\>
-</IressStack\>
-
-Copy
-
-### [](#custom-error-handling)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 error summary.
-
-\*Required Name
-
-\*Required Email address
-
-Sign up
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  IressTable,
-  IressFormProps,
-  IressForm,
-  IressModal,
-  IressStack,
-  IressFormField,
-  IressInput,
-  IressButton,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-import { FieldErrors } from 'react-hook-form';
-interface FieldValues {
-  name?: string;
-  email?: string;
-}
-export const CustomErrorHandlingForm \= () \=> {
-  const \[errors, setErrors\] \= useState<FieldErrors<FieldValues\> | undefined\>(
-    undefined,
-  );
-  return (
-    <IressForm {...{
-  hiddenErrorSummary: true,
-}} onError\={(data) \=> setErrors(data)}\>
-      <IressStack gutter\="md"\>
-        <IressFormField
-          label\="Name"
-          name\="name"
-          render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-          rules\={{
-            required: 'Name is required',
-          }}
-        />
-        <IressFormField
-          label\="Email address"
-          name\="email"
-          render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-          rules\={{
-            minLength: {
-              message: 'Use a longer email address',
-              value: 6,
-            },
-            required: 'Email is required',
-          }}
-        />
-        <IressButton mode\="primary" type\="submit"\>
-          Sign up        </IressButton\>
-      </IressStack\>
-      <IressModal
-        show\={!!errors}
-        onShowChange\={(show) \=> !show && setErrors(undefined)}
-      \>
-        <IressTable
-          caption\="Errors"
-          rows\={Object.entries(errors ?? {}).map((\[name, errorDetails\]) \=> ({
-            name,
-            errorDetails: (
-              <IressStack gutter\="sm"\>
-                <ul\>
-                  <li\>Error type: {String(errorDetails?.type)}</li\>
-                  <li\>Error message: {String(errorDetails?.message)}</li\>
-                </ul\>
-              </IressStack\>
-            ),
-          }))}
-        />
-      </IressModal\>
-    </IressForm\>
-  );
-};
-
-Copy
-
-### [](#pre-fill-the-form)Pre-fill the form
-
-You can set the `defaultValues` prop to pre-fill the form values.
-
-\*Required Name
-
-\*Required Email address
-
-Sign up
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressForm
-  defaultValues\={{
-    email: 'luke.skywalker@iress.com',
-    name: 'Luke Skywalker'
-  }}
-\>
-  <IressStack gutter\="md"\>
-    <IressFormField
-      label\="Name"
-      name\="name"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        required: 'Name is required'
-      }}
-    />
-    <IressFormField
-      label\="Email address"
-      name\="email"
-      render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-      rules\={{
-        minLength: {
-          message: 'Use a longer email address',
-          value: 6
-        },
-        required: 'Email is required'
-      }}
-    />
-    <IressButton
-      mode\="primary"
-      type\="submit"
-    \>
-      Sign up    </IressButton\>
-  </IressStack\>
-</IressForm\>
-
-Copy
-
-### [](#values)`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.
-
-\*Required Name
-
-\*Required Email address
-
-Sign up
-
-* * *
-
-Last updateClear
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-interface FieldValues {
-  name?: string;
-  email?: string;
-}
-export const ControlledForm \= (args: IressFormProps<FieldValues\>) \=> {
-  const \[values, setValues\] \= useState<FieldValues\>({
-    name: 'Leia Skywalker',
-    email: 'leia.skywalker@iress.com',
-  });
-  const \[preview, setPreview\] \= useState(false);
-  return (
-    <\>
-      <IressForm
-        {...args}
-        onSubmit\={(data) \=> {
-          setValues(data);
-          setPreview(true);
-        }}
-        values\={values}
-        mode\="onChange"
-      \>
-        <IressStack gutter\="md"\>
-          <IressFormField
-            label\="Name"
-            name\="name"
-            render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-            rules\={{
-              required: 'Name is required',
-            }}
-          />
-          <IressFormField
-            label\="Email address"
-            name\="email"
-            render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-            rules\={{
-              minLength: {
-                message: 'Use a longer email address',
-                value: 6,
-              },
-              required: 'Email is required',
-            }}
-          />
-          <IressButton mode\="primary" type\="submit"\>
-            Sign up          </IressButton\>
-        </IressStack\>
-      </IressForm\>
-      <IressDivider />
-      <IressInline gutter\="sm"\>
-        <IressButton onClick\={() \=> setPreview(true)}\>Last update</IressButton\>
-        <IressButton
-          onClick\={() \=>
-            setValues({
-              name: '',
-              email: '',
-            })
-          }
-        \>
-          Clear        </IressButton\>
-      </IressInline\>
-      <IressModal show\={!!preview} onShowChange\={(show) \=> setPreview(show)}\>
-        <IressTable
-          caption\="Last update"
-          rows\={Object.entries(values).map((entry) \=> ({
-            name: entry\[0\],
-            value: JSON.stringify(entry\[1\], null, 2),
-          }))}
-        />
-      </IressModal\>
-    </\>
-  );
-};
-
-Copy
-
-### [](#disable-validation)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.
-
-\*Required Name
-
-\*Required Email address
-
-Sign up
-
-* * *
-
-Save as draft
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  FormRef,
-  IressButton,
-  IressDivider,
-  IressForm,
-  IressFormField,
-  IressFormProps,
-  IressInput,
-  IressStack,
-  IressToasterProvider,
-  useToaster,
-} from '@iress-oss/ids-components';
-import { useRef } from 'react';
-interface FieldValues {
-  name?: string;
-  email?: string;
-}
-const Form \= () \=> {
-  const { success, error } \= useToaster();
-  const formRef \= useRef<FormRef<FieldValues\>>(null);
-  return (
-    <\>
-      <IressForm
-        
-        onSubmit\={() \=>
-          success({
-            heading: 'Passed validation',
-            children: JSON.stringify(formRef.current?.api.getValues(), null, 2),
-          })
-        }
-        onError\={() \=>
-          error({
-            heading: 'Failed validation',
-            children: JSON.stringify(formRef.current?.api.getValues(), null, 2),
-          })
-        }
-        ref\={formRef}
-      \>
-        <IressStack gutter\="md"\>
-          <IressFormField
-            label\="Name"
-            name\="name"
-            render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-            rules\={{
-              required: 'Name is required',
-            }}
-          />
-          <IressFormField
-            label\="Email address"
-            name\="email"
-            render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-            rules\={{
-              minLength: {
-                message: 'Use a longer email address',
-                value: 6,
-              },
-              required: 'Email is required',
-            }}
-          />
-          <IressButton mode\="primary" type\="submit"\>
-            Sign up          </IressButton\>
-        </IressStack\>
-      </IressForm\>
-      <IressDivider />
-      <IressButton
-        onClick\={() \=> {
-          success({
-            heading: 'Saved as draft (no validation)',
-            children: JSON.stringify(formRef.current?.api.getValues(), null, 2),
-          });
-        }}
-      \>
-        Save as draft      </IressButton\>
-    </\>
-  );
-};
-export const DisableValidationForm \= () \=> (
-  <IressToasterProvider\>
-    <Form  />
-  </IressToasterProvider\>
-);
-
-Copy
-
-### [](#resetting-the-form)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.
-
-\*Required Name
-
-\*Required Email address
-
-Sign up
-
-* * *
-
-Reset
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  IressFormProps,
-  IressForm,
-  FormRef,
-  IressDivider,
-  IressButton,
-  IressStack,
-  IressFormField,
-  IressInput,
-} from '@iress-oss/ids-components';
-import { useRef } from 'react';
-interface FieldValues {
-  name?: string;
-  email?: string;
-}
-export const FormReset \= () \=> {
-  const ref \= useRef<FormRef<FieldValues\>>(null);
-  return (
-    <IressForm {...{
-  defaultValues: {
-    name: '',
-    email: '',
-  },
-}} ref\={ref}\>
-      <IressStack gutter\="md"\>
-        <IressFormField
-          label\="Name"
-          name\="name"
-          render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-          rules\={{
-            required: 'Name is required',
-          }}
-        />
-        <IressFormField
-          label\="Email address"
-          name\="email"
-          render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-          rules\={{
-            minLength: {
-              message: 'Use a longer email address',
-              value: 6,
-            },
-            required: 'Email is required',
-          }}
-        />
-        <IressButton mode\="primary" type\="submit"\>
-          Sign up        </IressButton\>
-      </IressStack\>
-      <IressDivider />
-      <IressButton type\="reset" onClick\={() \=> ref.current?.reset()}\>
-        Reset      </IressButton\>
-    </IressForm\>
-  );
-};
-
-Copy
-
-### [](#custom-form-field-components)Custom form field components
-
-You can integrate custom components within `IressFormField` to create enhanced form experiences.
-
-This demo showcases how to embed a custom `TranscriptTextBox` component into `IressFormField` while leveraging its built-in validation rules, error handling, and state management without additional implementation.
-
-**Reminder:** When building custom form components, avoid managing error message state internally. This helps maintain the IressForm as the single source of truth and ensures consistent, predictable UI behavior.
-
-Key features demonstrated:
-
-*   **Universal Integration Pattern**: Shows how any custom component can be embedded in IressFormField
-*   **Built-in Validation**: Leverages IressFormField's validation rules with custom validation logic
-*   **Multiple Error Messages**: Displays simultaneous validation errors (e.g., wrong file type AND too large)
-*   **Drag & Drop**: Files can be dragged and dropped directly onto the textarea
-*   **File Upload Button**: Traditional file selection via button click
-*   **Visual Feedback**: UI changes during drag operations with border and background updates
-*   **Form State Management**: Automatically integrates with form context using controlled props
-*   **File Management**: Display uploaded files with remove functionality using `IressPanel`
-
-Custom FormField Components
-===========================
-
-This demo showcases how to embed any custom component (TranscriptTextBox) into IressFormField while leveraging its form validation, error handling, and state management without additional implementation. When building custom form components, avoid managing error message state internally. This helps maintain the IressForm as the single source of truth and ensures consistent, predictable UI behavior.
-
-\*Required Transcript
-
-Upload or copy and paste transcript here
-
-Upload
-
-Submit
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import React, { useState } from 'react';
-
-interface TranscriptFormValues {
-  transcript: TranscriptData | string;
-}
-interface TranscriptData {
-  content: string;
-  size?: number;
-  type: 'file' | 'text';
-  extension?: string;
-  fileName?: string;
-  rejectedReasons?: REJECTION\_REASONS\[\];
-}
-interface TranscriptTextBoxProps {
-  value: TranscriptData | string;
-  onChange: (data: TranscriptData) \=> void;
-  placeholder?: string;
-  rows?: number;
-  style?: React.CSSProperties;
-  allowedExtensions?: string\[\];
-  maxSizeInMB?: number;
-}
-interface SubmittedValuesDisplayProps {
-  submittedValues: TranscriptFormValues | null;
-  title?: string;
-}
-enum REJECTION\_REASONS {
-  TYPE \= 'type',
-  SIZE \= 'size',
-}
-const validateFile \=
-  (allowedExtensions: string\[\], maxSizeInMB: number) \=>
-  (data: TranscriptData | string) \=> {
-    if (
-      !!data &&
-      typeof data \=== 'object' &&
-      data.type \=== 'file' &&
-      Array.isArray(data.rejectedReasons) &&
-      data.rejectedReasons.length \> 0
-    ) {
-      const errors: string\[\] \= \[\];
-      if (data.rejectedReasons.includes(REJECTION\_REASONS.TYPE)) {
-        errors.push(\`Only .${allowedExtensions.join(', ')} accepted\`);
-      }
-      if (data.rejectedReasons.includes(REJECTION\_REASONS.SIZE)) {
-        errors.push(\`File size must be less than ${maxSizeInMB}MB\`);
-      }
-      if (errors.length \> 0) {
-        return errors.join('. ');
-      }
-    }
-    return true;
-  };
-const TranscriptTextBox \= ({
-  value,
-  onChange,
-  placeholder \= 'Copy and paste transcripts OR drag and drop / upload recordings, transcripts or documents here (.txt format).',
-  rows \= 10,
-  style,
-  allowedExtensions \= \['txt'\],
-  maxSizeInMB \= 10,
-}: TranscriptTextBoxProps) \=> {
-  // Extract content and file info from value
-  const currentData \=
-    typeof value \=== 'string'
-      ? { content: value, type: 'text' as const }
-      : value;
-  const currentFile \=
-    currentData?.type \=== 'file' &&
-    (!currentData.rejectedReasons || currentData.rejectedReasons.length \=== 0)
-      ? {
-          name: currentData.fileName ?? 'Unknown file',
-          size: currentData.size,
-        }
-      : null;
-  const createTranscriptData \= (
-    content: string,
-    type: 'file' | 'text',
-    additionalData?: Partial<TranscriptData\>,
-  ): TranscriptData \=> ({
-    content,
-    type,
-    ...additionalData,
-  });
-  const handleFileRead \= (file: File) \=> {
-    const reader \= new FileReader();
-    reader.onload \= (e) \=> {
-      const content \= e.target?.result as string;
-      onChange(
-        createTranscriptData(content, 'file', {
-          size: file.size,
-          extension: file.name.split('.').pop()?.toLowerCase(),
-          fileName: file.name,
-        }),
-      );
-    };
-    reader.onerror \= () \=> {
-      // Let parent handle errors through validation
-      onChange(
-        createTranscriptData('', 'file', {
-          fileName: file.name,
-        }),
-      );
-    };
-    reader.readAsText(file);
-  };
-  const handleTextChange \= (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement\>,
-    textContent: string,
-  ) \=> {
-    onChange(createTranscriptData(textContent, 'text'));
-  };
-  const onFileSelected \= (files: File\[\]) \=> {
-    if (files.length \=== 0) return;
-    const file \= files\[0\];
-    handleFileRead(file);
-  };
-  const { getRootProps, getInputProps, open, isDragActive } \= useDropzone({
-    multiple: false,
-    noClick: true,
-    maxSize: maxSizeInMB \* 1024 \* 1024,
-    accept: allowedExtensions.reduce(
-      (acc, ext) \=> {
-        const mimeType \=
-          ext \=== 'txt' ? 'text/plain' : 'application/octet-stream';
-        acc\[mimeType\] \= acc\[mimeType\] || \[\];
-        acc\[mimeType\].push(\`.${ext}\`);
-        return acc;
-      },
-      {} as Record<string, string\[\]\>,
-    ),
-    onDrop: (acceptedFiles, rejectedFiles) \=> {
-      if (acceptedFiles.length \> 0) {
-        onFileSelected(acceptedFiles);
-        return;
-      }
-      if (rejectedFiles.length \> 0) {
-        const rejectedFile \= rejectedFiles\[0\];
-        const { file, errors } \= rejectedFile;
-        // Map error codes to rejection reasons
-        const errorCodeMap \= {
-          'file-invalid-type': REJECTION\_REASONS.TYPE,
-          'file-too-large': REJECTION\_REASONS.SIZE,
-        } as const;
-        const rejectedReasons \= errors          .map((error) \=> errorCodeMap\[error.code as keyof typeof errorCodeMap\])
-          .filter((reason): reason is REJECTION\_REASONS \=> Boolean(reason));
-        onChange(
-          createTranscriptData('', 'file', {
-            fileName: file.name,
-            rejectedReasons,
-          }),
-        );
-      }
-    },
-  });
-  const handleUploadClick \= () \=> {
-    open();
-  };
-  const removeFile \= () \=> {
-    onChange(createTranscriptData('', 'text'));
-  };
-  return (
-    <IressStack gutter\="sm"\>
-      <div {...getRootProps()} style\={{ position: 'relative' }}\>
-        <input {...getInputProps()} />
-        <IressInput
-          value\={currentData?.content || ''}
-          onChange\={handleTextChange}
-          rows\={rows}
-          placeholder\={isDragActive ? 'Drop your file here...' : placeholder}
-          style\={{
-            boxSizing: 'border-box',
-            border: isDragActive ? '1px dashed #007acc' : undefined,
-            backgroundColor: isDragActive ? '#f0f8ff' : undefined,
-            ...style,
-          }}
-        />
-      </div\>
-      {currentFile && (
-        <IressPanel\>
-          <IressInline horizontalAlign\="between" verticalAlign\="middle"\>
-            <IressText\>📄 {currentFile.name}</IressText\>
-            <IressButton mode\="secondary" onClick\={removeFile}\>
-              Remove            </IressButton\>
-          </IressInline\>
-        </IressPanel\>
-      )}
-      <IressButton
-        mode\="secondary"
-        onClick\={handleUploadClick}
-        prepend\={<IressIcon name\="upload" />}
-      \>
-        Upload      </IressButton\>
-    </IressStack\>
-  );
-};
-const SubmittedValuesDisplay: React.FC<SubmittedValuesDisplayProps\> \= ({
-  submittedValues,
-  title \= 'Submitted Values:',
-}) \=> {
-  if (!submittedValues) {
-    return null;
-  }
-  return (
-    <IressPanel\>
-      <IressStack gutter\="sm"\>
-        <IressText variant\="bold"\>{title}</IressText\>
-        <IressText\>
-          <strong\>Type:</strong\>
-          {typeof submittedValues.transcript \=== 'string'
-            ? 'text'
-            : submittedValues.transcript.type}
-        </IressText\>
-        <IressText\>
-          <strong\>Content:</strong\>
-          {typeof submittedValues.transcript \=== 'string'
-            ? submittedValues.transcript
-            : submittedValues.transcript.content}
-        </IressText\>
-        {typeof submittedValues.transcript \=== 'object' &&
-          submittedValues.transcript.fileName && (
-            <IressText\>
-              <strong\>File Name:</strong\> {submittedValues.transcript.fileName}
-            </IressText\>
-          )}
-        {typeof submittedValues.transcript \=== 'object' &&
-          submittedValues.transcript.size && (
-            <IressText\>
-              <strong\>File Size:</strong\>
-              {(submittedValues.transcript.size / 1024).toFixed(2)} KB            </IressText\>
-          )}
-      </IressStack\>
-    </IressPanel\>
-  );
-};
-const Heading \= () \=> {
-  return (
-    <\>
-      <IressText element\="h1"\>Custom FormField Components</IressText\>
-      <IressText element\="p"\>
-        This demo showcases how to embed any custom component        (TranscriptTextBox) into IressFormField while leveraging its form        validation, error handling, and state management without additional        implementation. When building custom form components, avoid managing        error message state internally. This helps maintain the IressForm as the        single source of truth and ensures consistent, predictable UI behavior.      </IressText\>
-    </\>
-  );
-};
-export const CustomFormFieldComponents \= (
-  args: IressFormProps<TranscriptFormValues\>,
-) \=> {
-  const \[submittedValues, setSubmittedValues\] \=
-    useState<TranscriptFormValues | null\>(null);
-  const allowedExtensions \= \['txt'\];
-  const maxSizeInMB \= 0.1;
-  const handleSubmit \= (data: TranscriptFormValues) \=> {
-    setSubmittedValues(data);
-    console.log('Form submitted:', data);
-  };
-  return (
-    <\>
-      <Heading />
-      <IressForm<TranscriptFormValues>        {...args}
-        mode="onChange"        hiddenErrorSummary        onSubmit={handleSubmit}
-        defaultValues={{ transcript: { content: '', type: 'text' } }}
-      >        <IressStack gutter\="md"\>
-          <IressFormField
-            label\="Transcript"
-            name\="transcript"
-            hint\="Upload or copy and paste transcript here"
-            render\={(controlledProps) \=> (
-              <TranscriptTextBox
-                {...controlledProps}
-                allowedExtensions\={allowedExtensions}
-                maxSizeInMB\={maxSizeInMB}
-              />
-            )}
-            rules\={{
-              required: 'Transcript is required',
-              validate: {
-                file: validateFile(allowedExtensions, maxSizeInMB),
-              },
-            }}
-          />
-          <IressButton type\="submit" mode\="primary"\>
-            Submit          </IressButton\>
-          <SubmittedValuesDisplay submittedValues\={submittedValues} />
-        </IressStack\>
-      </IressForm\>
-    </\>
-  );
-};
-
-Copy
-
-### [](#forms-in-expanders-lazy-loading)Forms in expanders (lazy loading)
-
-If you are using forms in expanders, or in other scenarios when the loading of the form may be delayed, it is recommended to only load the form when it is required. This will improve performance of your application, and make it more predictable. It may also fix act warnings in tests if you are seeing some appearing due to conditionally loaded `IressForm` elements.
-
-Sender
-
-Recipient
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  IressExpander,
-  IressForm,
-  IressFormField,
-  IressFormProps,
-  IressInput,
-  IressStack,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-interface FieldValues {
-  name?: string;
-  email?: string;
-}
-const Form \= () \=> (
-  <IressForm \>
-    <IressStack gutter\="md"\>
-      <IressFormField
-        label\="Name"
-        name\="name"
-        render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-        rules\={{
-          required: 'Name is required',
-        }}
-      />
-      <IressFormField
-        label\="Email address"
-        name\="email"
-        render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-        rules\={{
-          minLength: {
-            message: 'Use a longer email address',
-            value: 6,
-          },
-          required: 'Email is required',
-        }}
-      />
-    </IressStack\>
-  </IressForm\>
-);
-export const FormExpanders \= () \=> {
-  const \[expander, setExpander\] \= useState('');
-  const isOpen \= (name: string) \=> expander \=== name;
-  return (
-    <IressStack gutter\="sm"\>
-      <IressExpander
-        activator\="Sender"
-        open\={isOpen('Sender')}
-        onChange\={(open) \=> open && setExpander('Sender')}
-      \>
-        {isOpen('Sender') && <Form  />}
-      </IressExpander\>
-      <IressExpander
-        activator\="Recipient"
-        open\={isOpen('Recipient')}
-        onChange\={(open) \=> open && setExpander('Recipient')}
-      \>
-        {isOpen('Recipient') && <Form  />}
-      </IressExpander\>
-    </IressStack\>
-  );
-};
-
-Copy
-
-### [](#conditional-fields-usewatch)Conditional fields (useWatch)
-
-When you have fields that are conditionally shown, you can use the `IressForm.useWatch` hook to watch the value of another field and conditionally render the field.
-
-**Notes:**
-
-*   You can use the `api.watch` method on the `IressForm`'s ref to watch the value of a field, but it is recommended to use the hook for better performance by isolating re-rendering at the component level.
-
-This is a conditional field example using "useWatch".
-
-\*Required Select fields to show
-
-Name
-
-Email
-
-* * *
-
-Submit
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  IressButton,
-  IressCheckbox,
-  IressCheckboxGroup,
-  IressDivider,
-  IressForm,
-  IressFormField,
-  IressFormProps,
-  IressInput,
-  IressStack,
-  IressText,
-} from '@iress-oss/ids-components';
-interface FieldValues {
-  show?: string\[\];
-  name?: string;
-  email?: string;
-}
-/\*\*
- \* Conditional fields need to be rendered in a sub-component, to allow it to use the \`useWatch\` \* hook to watch the value of the field dictating the display of conditional fields. \*/
-const FormSectionWithConditionalFields \= () \=> {
-  const show \= IressForm.useWatch<FieldValues\>({ name: 'show' });
-  return (
-    <IressStack gutter\="md"\>
-      <IressText\>
-        This is a conditional field example using "useWatch".      </IressText\>
-      <IressFormField
-        name\="show"
-        label\="Select fields to show"
-        rules\={{
-          required: 'Please select at least one field to show',
-        }}
-        render\={(controlledProps) \=> (
-          <IressCheckboxGroup {...controlledProps} layout\="inline"\>
-            <IressCheckbox value\="name"\>Name</IressCheckbox\>
-            <IressCheckbox value\="email"\>Email</IressCheckbox\>
-          </IressCheckboxGroup\>
-        )}
-      />
-      {show?.includes('name') && (
-        <IressFormField
-          name\="name"
-          label\="Name"
-          rules\={{
-            required: 'Name is required',
-          }}
-          render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-        />
-      )}
-      {show?.includes('email') && (
-        <IressFormField
-          name\="email"
-          label\="Email"
-          rules\={{
-            required: 'Email is required',
-            pattern: {
-              value:
-                /^\[a-zA-Z0-9.!#$%&'\*+/=?^\_\`{|}~-\]+@\[a-zA-Z0-9\](?:\[a-zA-Z0-9-\]{0,61}\[a-zA-Z0-9\])?(?:\\.\[a-zA-Z0-9\](?:\[a-zA-Z0-9-\]{0,61}\[a-zA-Z0-9\])?)\*$/,
-              message: 'Please enter a valid email address',
-            },
-          }}
-          render\={(controlledProps) \=> (
-            <IressInput {...controlledProps} type\="email" />
-          )}
-        /\>
-      )}
-    </IressStack\>
-  );
-};
-export const UseWatchForm \= () \=> (
-  <IressForm \>
-    <FormSectionWithConditionalFields />
-    <IressDivider />
-    <IressButton type\="submit" mode\="primary"\>
-      Submit    </IressButton\>
-  </IressForm\>
-);
-
-Copy
-
-[](#iresshookform)`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.
-
-\*Required First Name
-
-\*Required Last Name
-
-Submit
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-interface FieldValues {
-  firstName: string;
-  lastName: string;
-}
-export const HookFormExample \= () \=> {
-  const form \= useForm<FieldValues\>();
-  const firstName \= form.watch('firstName');
-  const lastName \= form.watch('lastName');
-  return (
-    <IressHookForm form\={form}\>
-      <IressStack gutter\="md"\>
-        {firstName && lastName && (
-          <IressPanel\>
-            Name: {firstName} {lastName}
-          </IressPanel\>
-        )}
-        <IressFormField
-          name\="firstName"
-          label\="First Name"
-          render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-          rules\={{ required: true }}
-        />
-        <IressFormField
-          name\="lastName"
-          label\="Last Name"
-          render\={(controlledProps) \=> (
-            <IressInput {...controlledProps} type\="email" />
-          )}
-          rules\={{ required: true }}
-        />
-        <IressButton type\="submit" mode\="primary"\>
-          Submit        </IressButton\>
-      </IressStack\>
-    </IressHookForm\>
-  );
-};
-
-Copy
-
-[](#migration-to-version-5)Migration to version 5
--------------------------------------------------
-
-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)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](https://react-hook-form.com/advanced-usage#TestingForm)\]
-
-Here is an example of testing a form submission.
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-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();
-
-Copy
-
-[](#caveat)Caveat
------------------
-
-### [](#using-iressselect-with-non-string-values-in-iressformfield)Using `IressSelect` with non-string values in `IressFormField`
-
-When using form controls that support non-string values (like `IressSelect` with number values), you might encounter type conflicts with React Hook Form's default event handling. By default, React Hook Form expects string values from form controls.
-
-**Problem:**
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-<IressFormField
-  name\="dependents"
-  label\="Dependents"
-  render\={(controlledProps) \=> (
-    <IressSelect {...controlledProps}\>
-      <option key\="0" value\={0}\>
-        0      </option\>
-      <option key\="1" value\={1}\>
-        1      </option\>
-      <option key\="2" value\={2}\>
-        2      </option\>
-    </IressSelect\>
-  )}
-/>
-
-Copy
-
-In this case, React Hook Form will try to convert the value to string, which might cause type issues.
-
-**Solution:** Override the `onChange` handler to pass the actual value as a second parameter:
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-<IressFormField
-  name\="dependents"
-  label\="Dependents"
-  render\={(controlledProps) \=> (
-    <IressSelect
-      {...controlledProps}
-      onChange\={(\_e, value) \=> controlledProps.onChange(value)}
-    \>
-      <option key\="0" value\={0}\>
-        0      </option\>
-      <option key\="1" value\={1}\>
-        1      </option\>
-      <option key\="2" value\={2}\>
-        2      </option\>
-    </IressSelect\>
-  )}
-/>
-
-Copy
-
-This ensures the original value type is preserved when passed to React Hook Form. You can find out more about the code example in the [Switch Edit Readonly Form Documentation](?path=/docs/components-form-recipes--docs#switching-between-readonly-and-edit-modes).
-
-### [](#properly-resetting-fields)Properly resetting fields
-
-When resetting fields that accept non-string values (like `IressRichSelect`), 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:**
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-const { resetField } \= IressForm.useFormContext();
-resetField('rich-select', {
-  label: '',
-  value: '',
-});
-
-Copy
-
-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:
-
-\[data-radix-scroll-area-viewport\] {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
-}
-\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
-  display: none;
-}
-:where(\[data-radix-scroll-area-viewport\]) {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-:where(\[data-radix-scroll-area-content\]) {
-  flex-grow: 1;
-}
-
-const { resetField } \= IressForm.useFormContext();
-resetField('rich-select', null); // or undefined
-
-Copy
-
-This will properly reset the field to null and clear the field value.
-
-### [](#conflicting-versions-of-react-hook-forms)Conflicting versions of React Hook Forms
-
-If you are using React Hook Forms in your application, please ensure it is the same version IDS uses, otherwise there will be conflicts.
-
-The version we are using in IDS is:
-
-yarn add react-hook-form@7.53.1
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Key concepts](#key-concepts)
-    *   [State management](#state-management)
-    *   [Validation](#validation)
-    *   [Syncing state](#syncing-state)
-*   [Usage](#usage)
-    *   [Fields](#fields)
-    *   [Rules](#rules)
-    *   [Handling submission](#handling-submission)
-    *   [Read only](#read-only)
-*   [Behaviour](#behaviour)
-*   [Examples](#examples)
-    *   [Validation summary](#validation-summary)
-    *   [Hidden validation summary](#hidden-validation-summary)
-    *   [Custom error handling](#custom-error-handling)
-    *   [Pre-fill the form](#pre-fill-the-form)
-    *   [values](#values)
-    *   [Disable validation](#disable-validation)
-    *   [Resetting the form](#resetting-the-form)
-    *   [Custom form field components](#custom-form-field-components)
-    *   [Forms in expanders (lazy loading)](#forms-in-expanders-lazy-loading)
-    *   [Conditional fields (useWatch)](#conditional-fields-usewatch)
-*   [IressHookForm](#iresshookform)
-*   [Migration to version 5](#migration-to-version-5)
-*   [Testing](#testing)
-*   [Caveat](#caveat)
-    *   [Using IressSelect with non-string values in IressFormField](#using-iressselect-with-non-string-values-in-iressformfield)
-    *   [Properly resetting fields](#properly-resetting-fields)
-    *   [Conflicting versions of React Hook Forms](#conflicting-versions-of-react-hook-forms)