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

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

@@ -1,886 +0,0 @@
-[](#recipes)Recipes
-===================
-
-[](#with-readonly-data)With readonly data
------------------------------------------
-
-You can use `IressForm` with readonly data by setting the `readonly` prop to `true` on controlled elements. This will disable those form controls, but will include the values in the form submission.
-
-Please take note of the following when displaying read only data.
-
-*   It is best to keep readonly data in a separate section of the form, to further avoid confusion with editable fields.
-
-User Details
-------------
-
-First Name
-
-Leia
-
-Last Name
-
-Skywalker
-
-* * *
-
-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; }
-
-export const WithReadonlyDataForm \= () \=> {
-  const \[values, setValues\] \= useState<FieldValues\>({
-    firstName: 'Leia',
-    lastName: 'Skywalker',
-    email: 'leia.skywalker@iress.com',
-  });
-  const \[preview, setPreview\] \= useState(false);
-  return (
-    <\>
-      <IressForm
-        onSubmit\={(data) \=> {
-          setValues(data);
-          setPreview(true);
-        }}
-        values\={values}
-      \>
-        <IressContainer\>
-          <IressText element\="h2"\>User Details</IressText\>
-          <IressStack gutter\="md"\>
-            <IressRow gutter\="md"\>
-              <IressCol\>
-                <IressFormField
-                  name\="firstName"
-                  label\="First Name"
-                  render\={(controlledProps) \=> (
-                    <IressInput {...controlledProps} readOnly />
-                  )}
-                />
-              </IressCol\>
-              <IressCol\>
-                <IressFormField
-                  name\="lastName"
-                  label\="Last Name"
-                  render\={(controlledProps) \=> (
-                    <IressInput {...controlledProps} readOnly />
-                  )}
-                />
-              </IressCol\>
-            </IressRow\>
-            <IressDivider gutter\="none" />
-            <IressRow\>
-              <IressCol\>
-                <IressFormField
-                  name\="email"
-                  label\="Email"
-                  render\={(controlledProps) \=> (
-                    <IressInput {...controlledProps} type\="email" />
-                  )}
-                />
-              </IressCol\>
-            </IressRow\>
-            <IressButton type\="submit" mode\="primary"\>
-              Submit            </IressButton\>
-          </IressStack\>
-        </IressContainer\>
-      </IressForm\>
-      <IressModal show\={!!preview} onShowChange\={(show) \=> setPreview(show)}\>
-        <IressTable
-          caption\="Submitted"
-          rows\={Object.entries(values).map((entry) \=> ({
-            name: entry\[0\],
-            value: JSON.stringify(entry\[1\], null, 2),
-          }))}
-        />
-      </IressModal\>
-    </\>
-  );
-};
-
-Copy
-
-[](#switching-between-readonly-and-edit-modes)Switching between readonly and edit modes
----------------------------------------------------------------------------------------
-
-It is recommended to use a button to toggle between read-only and editable input modes.
-
-Please take note of the following when switching between modes:
-
-*   Switching is done on a per-section basis, not on a per-field basis.
-*   When the user saves the data, it should switch back to read-only mode to avoid any confusion about whether the changes have been saved.
-
-User Details
-------------
-
-First Name
-
-Leia
-
-Last Name
-
-Skywalker
-
-Email
-
-leia.skywalker@iress.com
-
-dependents
-
-0
-
-Edit
-
-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; }
-
-export const SwitchEditReadonlyForm \= () \=> {
-  const dependentOptions \= \[
-    { value: 0, label: '0' },
-    { value: 1, label: '1' },
-    { value: 2, label: '2' },
-    { value: 3, label: '3' },
-    { value: 4, label: '4' },
-    { value: 5, label: '5' },
-    { value: 6, label: '6' },
-    { value: 7, label: '7' },
-    { value: 8, label: '8' },
-    { value: 9, label: '9' },
-    { value: 10, label: '10' },
-  \];
-  const \[values, setValues\] \= useState<FieldValues\>({
-    firstName: 'Leia',
-    lastName: 'Skywalker',
-    email: 'leia.skywalker@iress.com',
-    dependents: 0,
-  });
-  const \[preview, setPreview\] \= useState(false);
-  const \[editable, setEditable\] \= useState(false);
-  return (
-    <\>
-      <IressForm
-        onSubmit\={(data) \=> {
-          setValues(data);
-          setPreview(true);
-          setEditable(false);
-        }}
-        values\={values}
-      \>
-        <IressContainer\>
-          <IressStack gutter\="md"\>
-            <IressText element\="h2"\>User Details</IressText\>
-            <IressRow gutter\="md"\>
-              <IressCol\>
-                <IressFormField
-                  name\="firstName"
-                  label\="First Name"
-                  render\={(controlledProps) \=> (
-                    <IressInput {...controlledProps} readOnly\={!editable} />
-                  )}
-                />
-              </IressCol\>
-              <IressCol\>
-                <IressFormField
-                  name\="lastName"
-                  label\="Last Name"
-                  render\={(controlledProps) \=> (
-                    <IressInput {...controlledProps} readOnly\={!editable} />
-                  )}
-                />
-              </IressCol\>
-            </IressRow\>
-            <IressRow gutter\="md"\>
-              <IressCol\>
-                <IressFormField
-                  name\="email"
-                  label\="Email"
-                  render\={(controlledProps) \=> (
-                    <IressInput
-                      {...controlledProps}
-                      readOnly\={!editable}
-                      type\="email"
-                    />
-                  )}
-                />
-              </IressCol\>
-              <IressCol\>
-                <IressFormField
-                  name\="dependents"
-                  label\="dependents"
-                  render\={(controlledProps) \=> (
-                    <IressSelect
-                      {...controlledProps}
-                      readonly\={!editable}
-                      onChange\={(
-                        e: React.ChangeEvent<HTMLSelectElement\>,
-                        value?: FormControlValue,
-                      ) \=> controlledProps.onChange(value)}
-                    \>
-                      {dependentOptions.map((option) \=> (
-                        <option key\={option.value} value\={option.value}\>
-                          {option.label}
-                        </option\>
-                      ))}
-                    </IressSelect\>
-                  )}
-                />
-              </IressCol\>
-            </IressRow\>
-            {editable ? (
-              <IressInline gutter\="sm"\>
-                <IressButton type\="submit" mode\="primary"\>
-                  Save                </IressButton\>
-                <IressButton onClick\={() \=> setEditable(false)}\>
-                  Cancel                </IressButton\>
-              </IressInline\>
-            ) : (
-              <IressButton
-                onClick\={() \=> setEditable(true)}
-                prepend\={<IressIcon name\="pencil" />}
-              \>
-                Edit              </IressButton\>
-            )}
-          </IressStack\>
-        </IressContainer\>
-      </IressForm\>
-      <IressModal show\={!!preview} onShowChange\={(show) \=> setPreview(show)}\>
-        <IressTable
-          caption\="Submitted"
-          rows\={Object.entries(values).map((entry) \=> ({
-            name: entry\[0\],
-            value: JSON.stringify(entry\[1\], null, 2),
-          }))}
-        />
-      </IressModal\>
-    </\>
-  );
-};
-
-Copy
-
-[](#alternative-form-validation)Alternative form validation
------------------------------------------------------------
-
-`IressForm` is always recommended for all validation, as it is the cleanest way (least code) to provide the best form user experience for your users. Please visit the [`IressForm` documentation](./?path=/docs/components-form--docs) for different validation examples.
-
-However, if you have more complex requirements and you find `IressForm` too opinionated for your needs, you can always bring your own form validation using a native `form` element and the other IDS components such as `IressField`.
-
-Here is an example showcasing a form using the native form constraints API to achieve validation using IDS components. There are other libraries such as: [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi) or [Zod](https://zod.dev/)) which can improve scalability, with the downside being you will have to maintain all validation yourself.
-
-**\*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; }
-
-export const NativeValidationForm \= () \=> {
-  const \[formData, setFormData\] \= useState({
-    name: '',
-    email: '',
-  });
-  const \[errors, setErrors\] \= useState<Record<string, boolean\>>({
-    name: false,
-    email: false,
-  });
-  const \[isSubmitted, setIsSubmitted\] \= useState(false);
-  const hasErrors \= Object.values(errors).some((error) \=> !!error);
-  const handleInputChange \= (e: React.ChangeEvent<InputBaseElement\>) \=> {
-    setFormData({ ...formData, \[e.target.name\]: e.target.value });
-    setErrors({
-      ...errors,
-      \[e.target.name\]: !e.currentTarget.reportValidity(),
-    });
-  };
-  const handleSubmit \= (e: React.FormEvent<HTMLFormElement\>) \=> {
-    e.preventDefault();
-    const form \= e.currentTarget;
-    setIsSubmitted(true);
-    if (!form.checkValidity()) {
-      const fieldData \= Object.fromEntries(new FormData(form).entries());
-      const fieldNames \= Object.keys(fieldData);
-      setErrors(
-        fieldNames.reduce(
-          (newErrors, fieldName) \=> {
-            newErrors\[fieldName\] \= !form
-              .querySelector<HTMLInputElement\>(\`\[name=${fieldName}\]\`)
-              ?.checkValidity();
-            return newErrors;
-          },
-          {} as Record<string, boolean\>,
-        ),
-      );
-    }
-    console.log(formData);
-  };
-  return (
-    <form onSubmit\={handleSubmit} noValidate\>
-      <IressStack gutter\="md"\>
-        {isSubmitted && hasErrors && (
-          <IressAlert status\="danger"\>
-            There's a problem with your submission.          </IressAlert\>
-        )}
-        <IressField
-          label\="Name"
-          error\={
-            errors.name && (
-              <IressValidationMessage\>Name is required</IressValidationMessage\>
-            )
-          }
-          required
-        \>
-          <IressInput name\="name" onChange\={handleInputChange} required />
-        </IressField\>
-        <IressField
-          label\="Email address"
-          error\={
-            errors.email && (
-              <IressValidationMessage\>Email is required</IressValidationMessage\>
-            )
-          }
-          required
-        \>
-          <IressInput name\="email" onChange\={handleInputChange} required />
-        </IressField\>
-        <IressButton mode\="primary" type\="submit"\>
-          Sign up        </IressButton\>
-      </IressStack\>
-    </form\>
-  );
-};
-
-Copy
-
-[](#nested-forms)Nested forms
------------------------------
-
-Unfortunately, it is [forbidden to nest form elements as per the HTML specifications](https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form).
-
-To achieve a similar effect, you can use multiple `IressForm` components, and trigger validation in multiple ways:
-
-1.  You can trigger specific forms using the `form` attribute of `IressButton`. The [`form` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form) allows you to specify the form ID to submit when the button is clicked, which can be any form on the page, and will take precedence over the parent form of a button.
-2.  If you need to trigger multiple forms, you can use the [`requestSubmit` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit) on the form element to trigger the validation of multiple forms.
-3.  If you only want to trigger validation and not trigger submission even if the validation passes, you can use the `ref` attribute of `IressForm` and trigger validation manually using `ref.current?.api.trigger()`, which is based on the [React Hook Form API](https://react-hook-form.com/docs/useform/trigger).
-
-The example here showcases triggering validation using the `form` attribute of `IressButton` and the `requestSubmit` method on the form element.
-
-\*Required Name
-
-Add new dependant
-
-\*Required Name
-
-Save
-
-* * *
-
-Submit main formSubmit all forms
-
-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 FormData {
-  name: string;
-}
-const MainForm \= () \=> {
-  const \[details, setDetails\] \= useState<FormData | undefined\>();
-  return (
-    <\>
-      <IressForm<FormData>        errorSummaryHeading="Please correct the following errors for the main form"        id="mainForm"        onSubmit={(data) \=> {
-          setDetails(data);
-        }}
-      >        <IressFormField<FormData>          name="name"          label="Name"          render={(controlledProps) \=> <IressInput {...controlledProps} />}
-          rules={{ required: true }}
-        />      </IressForm\>
-      <IressModal
-        show\={!!details}
-        onShowChange\={(show) \=> !show && setDetails(undefined)}
-      \>
-        {details && (
-          <IressTable
-            caption\="Submitted main form"
-            rows\={Object.entries(details).map((entry) \=> ({
-              name: entry\[0\],
-              value: JSON.stringify(entry\[1\], null, 2),
-            }))}
-          />
-        )}
-      </IressModal\>
-    </\>
-  );
-};
-const SubForm \= () \=> {
-  const \[details, setDetails\] \= useState<FormData | undefined\>();
-  return (
-    <IressPanel\>
-      <IressStack gutter\="md"\>
-        <IressForm<FormData>          errorSummaryHeading="Please correct the following errors found for the dependant"          gutter="sm"          id="subForm"          onSubmit={(data) \=> {
-            setDetails(data);
-          }}
-        >          <IressFieldGroup label\="Add new dependant" inline\>
-            <IressFormField
-              name\="name"
-              label\="Name"
-              render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-              rules\={{ required: true }}
-            />
-            <IressButton type\="submit"\>Save</IressButton\>
-          </IressFieldGroup\>
-        </IressForm\>
-        <IressTable
-          caption\="Dependants"
-          columns\={\[
-            { key: 'name', label: 'Name' },
-            { key: 'value', label: 'Value' },
-          \]}
-          rows\={Object.entries(details ?? {}).map((entry) \=> ({
-            name: entry\[0\],
-            value: JSON.stringify(entry\[1\], null, 2),
-          }))}
-        />
-      </IressStack\>
-    </IressPanel\>
-  );
-};
-export const NestedFormsExample \= () \=> {
-  const submitAllForms \= () \=> {
-    document.querySelector<HTMLFormElement\>('\[id=mainForm\]')?.requestSubmit();
-    document.querySelector<HTMLFormElement\>('\[id=subForm\]')?.requestSubmit();
-  };
-  return (
-    <IressStack gutter\="md"\>
-      <MainForm />
-      <SubForm />
-      <IressDivider />
-      <IressInline gutter\="md"\>
-        <IressButton type\="submit" form\="mainForm"\>
-          Submit main form        </IressButton\>
-        <IressButton onClick\={submitAllForms}\>Submit all forms</IressButton\>
-      </IressInline\>
-    </IressStack\>
-  );
-};
-
-Copy
-
-[](#form-groups)Form Groups
----------------------------
-
-Powered by [React Hook Form](https://react-hook-form.com/docs/usefieldarray)'s `useFieldArray`, this example allows you add/edit/delete multiple children sections within ONE form (not nested form).
-
-Form groups
-===========
-
-This is one form with child sections (not nested forms). Play around to add/edit/delete child form sections:
-
-Client
-------
-
-\*Required Name
-
-\*Required Salary
-
-\*Required Goal
-
-Dependant 1
------------
-
-\*Required Name
-
-\*Required Relationship
-
-\*Required Age
-
-Save
-
-Add Dependant
-
-* * *
-
-Submit All
-
-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 Client {
-  name: string | undefined;
-  salary: number | undefined;
-  goal: string | undefined;
-}
-interface Dependant {
-  name: string | undefined;
-  relationship: string | undefined;
-  age: number | undefined;
-}
-interface FormValues {
-  client: Client;
-  dependants: Dependant\[\];
-}
-interface ClientProps {
-  control: Control<FormValues\> | undefined;
-}
-interface DependantProps {
-  index: number;
-  control: Control<FormValues\> | undefined;
-  update: (index: number, data: Dependant) \=> void;
-  remove: (index: number) \=> void;
-  getValues: UseFormGetValues<FormValues\>;
-}
-const defaultValues \= {
-  client: {
-    name: '',
-    salary: undefined,
-    goal: '',
-  },
-  dependants: \[
-    {
-      name: '',
-      relationship: '',
-      age: undefined,
-    },
-  \],
-};
-const ClientSection: React.FC<ClientProps\> \= ({ control }) \=> {
-  return (
-    <IressFieldGroup label\={<IressText element\="h2"\>Client</IressText\>}\>
-      <IressStack gutter\="md"\>
-        <IressFormField
-          name\="client.name"
-          label\="Name"
-          control\={control}
-          render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-          rules\={{ required: true }}
-        />
-        <IressFormField
-          name\="client.salary"
-          label\="Salary"
-          control\={control}
-          render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-          rules\={{ required: true }}
-        />
-        <IressFormField
-          name\="client.goal"
-          label\="Goal"
-          control\={control}
-          render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-          rules\={{ required: true }}
-        />
-      </IressStack\>
-    </IressFieldGroup\>
-  );
-};
-const DependantSection: React.FC<DependantProps\> \= ({
-  index,
-  update,
-  remove,
-  control,
-  getValues,
-}: DependantProps) \=> {
-  return (
-    <IressPanel\>
-      <IressInline horizontalAlign\="right"\>
-        <IressCloseButton onClick\={() \=> remove(index)} />
-      </IressInline\>
-      <IressStack gutter\="md"\>
-        <IressFieldGroup
-          label\={<IressText element\="h2"\>Dependant {index + 1}</IressText\>}
-        \>
-          <IressStack gutter\="md"\>
-            <IressFormField
-              name\={\`dependants.${index}.name\`}
-              label\="Name"
-              control\={control}
-              render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-              rules\={{ required: true }}
-            />
-            <IressFormField
-              name\={\`dependants.${index}.relationship\`}
-              label\="Relationship"
-              control\={control}
-              render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-              rules\={{ required: true }}
-            />
-            <IressFormField
-              name\={\`dependants.${index}.age\`}
-              label\="Age"
-              control\={control}
-              render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-              rules\={{ required: true }}
-            />
-            <IressButton
-              type\="button"
-              prepend\={<IressIcon name\="check" />}
-              onClick\={() \=> {
-                const data \= getValues();
-                const value \= data?.dependants\[index\];
-                update(index, value);
-              }}
-            \>
-              Save            </IressButton\>
-          </IressStack\>
-        </IressFieldGroup\>
-      </IressStack\>
-    </IressPanel\>
-  );
-};
-export const FormGroups \= () \=> {
-  const form \= useForm<FormValues\>({
-    defaultValues: defaultValues,
-    mode: 'onBlur',
-  });
-  const { control, getValues } \= form;
-  const { fields, append, update, remove } \= useFieldArray({
-    name: 'dependants',
-    control,
-  });
-  const onSubmit \= (data: FormValues) \=> console.log(data);
-  return (
-    <IressStack gutter\="md"\>
-      <IressText element\="h1"\>Form groups</IressText\>
-      <IressText element\="p"\>
-        This is one form with child sections (not nested forms). Play around to        add/edit/delete child form sections:      </IressText\>
-      <IressHookForm<FormValues>        gutter="md"        form={form}
-        onSubmit={onSubmit}
-        errorSummaryHeading="Please correct the following errors found for the form:"      >        <IressStack gutter\="md"\>
-          <ClientSection control\={control} />
-          {fields.map((field, index) \=> (
-            <DependantSection
-              key\={field.id}
-              index\={index}
-              control\={control}
-              update\={update}
-              remove\={remove}
-              getValues\={getValues}
-            />
-          ))}
-          <IressButton
-            type\="button"
-            prepend\={<IressIcon name\="plus" />}
-            onClick\={() \=> {
-              append({ name: '', relationship: '', age: undefined });
-            }}
-          \>
-            Add Dependant          </IressButton\>
-        </IressStack\>
-        <IressDivider />
-        <IressButton type\="submit" mode\="primary"\>
-          Submit All        </IressButton\>
-      </IressHookForm\>
-    </IressStack\>
-  );
-};
-
-Copy
-
-[](#hidden-inputs)Hidden inputs
--------------------------------
-
-You can use hidden inputs to store data that you do not want to display to the user, but still need to include in the form submission. This is useful for storing metadata or other information that is not editable by the user.
-
-Warning
--------
-
-This is not a recommended practice, as it can lead to security issues if sensitive data is stored in hidden inputs. It is better to use a variable to store your data, and include it in the form submission using the `onSubmit` handler.
-
-Visible Input
-
-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; }
-
-export const HiddenInputsForm \= () \=> {
-  const form \= IressForm.useForm();
-  const { register } \= form;
-  // This is a hidden input field that the user cannot see or interact with.
-  // This is the recommended way to handle hidden inputs in Iress forms.
-  const hiddenInputStoredInVariable \= 'hiddenValue';
-  return (
-    <IressHookForm
-      form\={form}
-      onSubmit\={(data) \=> {
-        console.log('Form submitted with data:', {
-          ...data,
-          hiddenInputStoredInVariable,
-        });
-      }}
-    \>
-      <IressStack gutter\="md"\>
-        <IressFormField
-          label\="Visible Input"
-          name\="visibleInput"
-          render\={(controlledProps) \=> <IressInput {...controlledProps} />}
-        />
-        {/\* Hidden field - NOT RECOMMENDED \*/}
-        <input
-          type\="hidden"
-          {...register('hiddenField')} // Manually register the hidden field with react-hook-form
-          value\="hiddenValue"
-        />
-        <IressButton type\="submit"\>Submit</IressButton\>
-      </IressStack\>
-    </IressHookForm\>
-  );
-};
-
-Copy
-
-[](#validation-depend-on-other-fields)Validation depend on other fields
------------------------------------------------------------------------
-
-This example shows how to validate one field based on another field's value.
-
-The budget amount input validates against the selected budget range using the custom `validateBudgetInput` rules.
-
-Validation depend on other fields
-=================================
-
-This form demonstrates how to validate a field based on the value of another field. The budget amount field is validated against the selected budget range.
-
-\*Required Monthly investment budget
-
-Select your budget rangeLess than $499Between $500 to $999More than $1000
-
-\*Required Enter your budget amount ($)
-
-AUD
-
-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 FormData {
-  primaryField: string;
-  dependentField: string;
-}
-const budgetOptions \= \[
-  { value: 'less-than-499', label: 'Less than $499' },
-  { value: 'between-500-999', label: 'Between $500 to $999' },
-  { value: 'more-than-1000', label: 'More than $1000' },
-\];
-const validateBudgetInput \= (
-  value: string,
-  selectedBudget: string,
-): string | true \=> {
-  if (!selectedBudget) return 'Select budget range first';
-  const numericValue \= parseFloat(value);
-  if (isNaN(numericValue)) return 'Enter a valid number';
-  switch (selectedBudget) {
-    case 'less-than-499':
-      return numericValue < 499 || 'Must be less than $499';
-    case 'between-500-999':
-      return (
-        (numericValue \>= 500 && numericValue <= 999) ||
-        'Must be between $500-$999'
-      );
-    case 'more-than-1000':
-      return numericValue \> 1000 || 'Must be more than $1000';
-    default:
-      return true;
-  }
-};
-export const ValidationDependOnOtherFields \= () \=> {
-  const \[submitted, setSubmitted\] \= useState<FormData | undefined\>(undefined);
-  const form \= IressForm.useForm<FormData\>({
-    defaultValues: {
-      primaryField: '',
-      dependentField: '',
-    },
-  });
-  const onSubmit \= (data: FormData) \=> {
-    console.log(data);
-    setSubmitted(data);
-  };
-  const onError \= (errors: Record<string, unknown\>) \=> {
-    console.log('Form validation errors:', errors);
-  };
-  return (
-    <\>
-      <IressText element\="h1"\>Validation depend on other fields</IressText\>
-      <IressText element\="p"\>
-        This form demonstrates how to validate a field based on the value of        another field. The budget amount field is validated against the selected        budget range.      </IressText\>
-      <IressHookForm form\={form} onSubmit\={onSubmit} onError\={onError}\>
-        <IressStack gutter\="md"\>
-          <IressRow\>
-            <IressCol\>
-              <IressFormField
-                name\="primaryField"
-                label\="Monthly investment budget"
-                rules\={{
-                  required: 'Budget range is required',
-                }}
-                render\={(field) \=> (
-                  <IressSelect
-                    {...field}
-                    placeholder\="Select your budget range"
-                  \>
-                    {budgetOptions.map((option) \=> (
-                      <option key\={option.value} value\={option.value}\>
-                        {option.label}
-                      </option\>
-                    ))}
-                  </IressSelect\>
-                )}
-              />
-            </IressCol\>
-          </IressRow\>
-          <IressRow\>
-            <IressCol\>
-              <IressFormField
-                name\="dependentField"
-                label\="Enter your budget amount ($)"
-                rules\={{
-                  required: 'Budget amount is required',
-                  validate: (value: string, formValues: FormData) \=>
-                    validateBudgetInput(value, formValues.primaryField),
-                }}
-                render\={(field) \=> (
-                  <IressInputCurrency {...field} type\="number" />
-                )}
-              />
-            </IressCol\>
-          </IressRow\>
-          <IressButton type\="submit"\>Submit</IressButton\>
-        </IressStack\>
-      </IressHookForm\>
-      <IressDivider />
-      {submitted && (
-        <IressStack gutter\="md"\>
-          <IressText variant\="bold"\>Submitted Values:</IressText\>
-          <IressText\>
-            Budget Range:{' '}
-            {budgetOptions.find(
-              (option) \=> option.value \=== submitted.primaryField,
-            )?.label ?? submitted.primaryField}
-          </IressText\>
-          <IressText\>Budget Amount: ${submitted.dependentField}</IressText\>
-        </IressStack\>
-      )}
-    </\>
-  );
-};
-
-Copy
-
-On this page
-
-*   [With readonly data](#with-readonly-data)
-*   [Switching between readonly and edit modes](#switching-between-readonly-and-edit-modes)
-*   [Alternative form validation](#alternative-form-validation)
-*   [Nested forms](#nested-forms)
-*   [Form Groups](#form-groups)
-*   [Hidden inputs](#hidden-inputs)
-*   [Validation depend on other fields](#validation-depend-on-other-fields)