@strictly/react-form 0.0.6 → 0.0.8

package/mantine/create_fields_view.tsx

@@ -18,7 +18,7 @@ export function createFieldsView<
   valuePath: K,
   FieldsView: ComponentType<P>,
   observableProps: FieldsViewProps<F>,
-): MantineFieldComponent<FieldsViewProps<P['fields']>, P> {
+): MantineFieldComponent<FieldsViewProps<P['fields']>, P, never> {
   function toKey(subKey: string | number | symbol): string {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return (subKey as string).replace('$', valuePath as string)
@@ -49,18 +49,22 @@ export function createFieldsView<
   }
 
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  return observer(function (props: ComponentProps<MantineFieldComponent<FieldsViewProps<P['fields']>, P>>) {
+  return observer(function (props: ComponentProps<MantineFieldComponent<FieldsViewProps<P['fields']>, P, never>>) {
     // convert fields to sub-fields
-    const subFields = Object.entries(observableProps.fields).reduce<Record<string, unknown>>((acc, [
-      fieldKey,
-      fieldValue,
-    ]) => {
+    const subFields = Object.entries(observableProps.fields).reduce<Record<string, unknown>>(
+      (acc, [
+        fieldKey,
+        fieldValue,
+      ]) => {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        if (fieldKey.startsWith(valuePath as string)) {
+          acc[toSubKey(fieldKey)] = fieldValue
+        }
+        return acc
+      },
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      if (fieldKey.startsWith(valuePath as string)) {
-        acc[toSubKey(fieldKey)] = fieldValue
-      }
-      return acc
-    }, {})
+      {} as P['fields'],
+    )
 
     return (
       <FieldsView
@@ -69,13 +73,12 @@ export function createFieldsView<
           // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
           ...props as any
         }
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        fields={subFields as P['fields']}
+        fields={subFields}
         onFieldBlur={onFieldBlur}
         onFieldFocus={onFieldFocus}
         onFieldSubmit={onFieldSubmit}
         onFieldValueChange={onFieldValueChange}
       />
     )
-  }) as unknown as MantineFieldComponent<FieldsViewProps<P['fields']>, P>
+  }) as unknown as MantineFieldComponent<FieldsViewProps<P['fields']>, P, never>
 }

package/mantine/create_form.tsx

@@ -21,7 +21,7 @@ export function createForm<
   valuePath: K,
   Form: ComponentType<P>,
   observableProps: FieldsViewProps<F>,
-): MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P> {
+): MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P, never> {
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   return observer((props: ComponentProps<MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P>>) => {
     const { value } = observableProps.fields[valuePath]
@@ -39,5 +39,5 @@ export function createForm<
         value={value}
       />
     )
-  }) as MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P>
+  }) as MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P, never>
 }

package/mantine/create_list.tsx

@@ -29,7 +29,7 @@ export function createList<
   this: MantineForm<F>,
   valuePath: K,
   List: ComponentType<Props>,
-): MantineFieldComponent<SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>>, Props> {
+): MantineFieldComponent<SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>>, Props, never> {
   const propSource = () => {
     const values = [...this.fields[valuePath].value]
     return {

package/mantine/create_pill.tsx

@@ -25,7 +25,7 @@ export function createPill<
   this: MantineForm<F>,
   valuePath: K,
   Pill: ComponentType<Props>,
-): MantineFieldComponent<SuppliedPillProps, Props> {
+): MantineFieldComponent<SuppliedPillProps, Props, never> {
   const propSource = () => {
     const {
       readonly,

package/mantine/create_radio.tsx

@@ -22,7 +22,7 @@ export function createRadio<
   valuePath: K,
   value: ValueTypeOfField<F[K]>,
   Radio: ComponentType<Props>,
-): MantineFieldComponent<SuppliedRadioProps, Props> {
+): MantineFieldComponent<SuppliedRadioProps, Props, never> {
   const propSource = () => {
     return {
       disabled: this.fields[valuePath].readonly,

package/mantine/create_radio_group.tsx

@@ -68,6 +68,10 @@ export function createRadioGroup<
       onKeyUp,
     }
   }
-
-  return createUnsafePartialObserverComponent(RadioGroup, propSource, ['ErrorRenderer'])
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return createUnsafePartialObserverComponent(RadioGroup, propSource, ['ErrorRenderer']) as MantineFieldComponent<
+    SuppliedRadioGroupProps,
+    Props,
+    ErrorOfField<F[K]>
+  >
 }

package/mantine/create_text_input.tsx

@@ -59,13 +59,18 @@ export function createTextInput<
   }: {
     ErrorRenderer?: ErrorRenderer<ErrorOfField<F[K]>>,
   }) => {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const field = this.fields[valuePath as string]
+    if (field == null) {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      throw new Error(`invalid field ${valuePath as string}`)
+    }
     const {
       readonly,
       required,
       value,
       error,
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    } = this.fields[valuePath as string]
+    } = field
     return {
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       name: valuePath as string,
@@ -79,6 +84,7 @@ export function createTextInput<
       onKeyUp,
     }
   }
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   return createUnsafePartialObserverComponent<
     typeof TextInput,
     SuppliedTextInputProps,
@@ -88,5 +94,5 @@ export function createTextInput<
     TextInput,
     propSource,
     ['ErrorRenderer'],
-  )
+  ) as MantineFieldComponent<SuppliedTextInputProps, Props, ErrorOfField<F[K]>>
 }

package/mantine/create_value_input.tsx

@@ -77,6 +77,7 @@ export function createValueInput<
       onKeyUp,
     }
   }
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   return createUnsafePartialObserverComponent<
     typeof ValueInput,
     SuppliedValueInputProps<ValueTypeOfField<F[K]>>,
@@ -86,5 +87,5 @@ export function createValueInput<
     ValueInput,
     propSource,
     ['ErrorRenderer'],
-  )
+  ) as MantineFieldComponent<SuppliedValueInputProps<ValueTypeOfField<F[K]>>, Props, ErrorOfField<F[K]>>
 }

package/mantine/error_renderer.ts

@@ -11,5 +11,5 @@ export function DefaultErrorRenderer({
   error,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 }: ErrorRendererProps<any>) {
-  return error
+  return JSON.stringify(error)
 }

package/mantine/hooks.tsx

@@ -209,7 +209,7 @@ class MantineFormImpl<
 
   textInput<
     K extends keyof StringFieldsOfFields<F>,
-  >(valuePath: K): MantineFieldComponent<SuppliedTextInputProps, TextInputProps>
+  >(valuePath: K): MantineFieldComponent<SuppliedTextInputProps, TextInputProps, ErrorOfField<F[K]>>
   textInput<
     K extends keyof StringFieldsOfFields<F>,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -217,7 +217,7 @@ class MantineFormImpl<
   >(
     valuePath: K,
     TextInput?: ComponentType<P>,
-  ): MantineFieldComponent<SuppliedTextInputProps, P>
+  ): MantineFieldComponent<SuppliedTextInputProps, P, ErrorOfField<F[K]>>
   textInput<
     K extends keyof StringFieldsOfFields<F>,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -264,7 +264,7 @@ class MantineFormImpl<
 
   checkbox<
     K extends keyof BooleanFieldsOfFields<F>,
-  >(valuePath: K): MantineFieldComponent<SuppliedCheckboxProps, CheckboxProps>
+  >(valuePath: K): MantineFieldComponent<SuppliedCheckboxProps, CheckboxProps, ErrorOfField<F[K]>>
   checkbox<
     K extends keyof BooleanFieldsOfFields<F>,
     P extends SuppliedCheckboxProps,
@@ -282,19 +282,21 @@ class MantineFormImpl<
       valuePath,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       Checkbox as ComponentType<SuppliedCheckboxProps>,
-    ) as MantineFieldComponent<SuppliedCheckboxProps, P>
+    ) as MantineFieldComponent<SuppliedCheckboxProps, P, ErrorOfField<F[K]>>
   }
 
+  // this should work?
   radioGroup<
     K extends keyof StringFieldsOfFields<F>,
-  >(valuePath: K): MantineFieldComponent<SuppliedRadioGroupProps, RadioGroupProps>
+    P extends RadioGroupProps = RadioGroupProps,
+  >(valuePath: K): MantineFieldComponent<SuppliedRadioGroupProps, P, ErrorOfField<F[K]>>
   radioGroup<
     K extends keyof StringFieldsOfFields<F>,
     P extends SuppliedRadioGroupProps,
   >(
     valuePath: K,
     RadioGroup: ComponentType<P>,
-  ): MantineFieldComponent<SuppliedRadioGroupProps, P>
+  ): MantineFieldComponent<SuppliedRadioGroupProps, P, ErrorOfField<F[K]>>
   radioGroup<
     K extends keyof StringFieldsOfFields<F>,
     P extends SuppliedRadioGroupProps,
@@ -340,7 +342,7 @@ class MantineFormImpl<
       value,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       Radio as ComponentType<SuppliedRadioProps>,
-    ) as MantineFieldComponent<SuppliedRadioProps, P>
+    ) as MantineFieldComponent<SuppliedRadioProps, P, ErrorOfField<F[K]>>
   }
 
   pill<
@@ -352,7 +354,7 @@ class MantineFormImpl<
   >(
     valuePath: K,
     Pill: ComponentType<P>,
-  ): MantineFieldComponent<SuppliedPillProps, P>
+  ): MantineFieldComponent<SuppliedPillProps, P, ErrorOfField<F[K]>>
   pill<
     K extends keyof AllFieldsOfFields<F>,
     P extends SuppliedPillProps,
@@ -373,7 +375,8 @@ class MantineFormImpl<
     K extends keyof ListFieldsOfFields<F>,
   >(valuePath: K): MantineFieldComponent<
     SuppliedListProps<`${K}.${number}`>,
-    ComponentProps<typeof DefaultList<ElementOfArray<F[K]['value']>, K>>
+    ComponentProps<typeof DefaultList<ElementOfArray<F[K]['value']>, K>>,
+    never
   > {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.listCache.retrieveOrCreate(
@@ -382,7 +385,7 @@ class MantineFormImpl<
     ) as MantineFieldComponent<
       SuppliedListProps<`${K}.${number}`>,
       ComponentProps<typeof DefaultList<ElementOfArray<F[K]['value']>, K>>,
-      ErrorOfField<F[K]>
+      never
     >
   }
 
@@ -391,7 +394,8 @@ class MantineFormImpl<
     P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>,
   >(valuePath: K, FieldsView: ComponentType<P>): MantineFieldComponent<
     FieldsViewProps<P['fields']>,
-    P
+    P,
+    never
   > {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.fieldsViewCache.retrieveOrCreate(
@@ -402,7 +406,8 @@ class MantineFormImpl<
       this,
     ) as unknown as MantineFieldComponent<
       FieldsViewProps<P['fields']>,
-      P
+      P,
+      never
     >
   }
 
@@ -412,7 +417,7 @@ class MantineFormImpl<
   >(
     valuePath: K,
     Form: ComponentType<P>,
-  ): MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P> {
+  ): MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P, never> {
     // strip props from component since we lose information in the cache
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.formCache.retrieveOrCreate(
@@ -421,6 +426,6 @@ class MantineFormImpl<
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       Form as ComponentType,
       this,
-    ) as unknown as MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P>
+    ) as unknown as MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P, never>
   }
 }

package/mantine/specs/__snapshots__/checkbox_hooks.tests.tsx.snap

@@ -1,68 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`mantine checkbox hooks > renders CustomError 1`] = `
-<div>
-  <style
-    data-mantine-styles="classes"
-  >
-    @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
-  </style>
-  <div
-    class="m_bf2d988c mantine-Checkbox-root m_5f75b09e mantine-Checkbox-root"
-    data-checked="true"
-    data-label-position="right"
-    style="--checkbox-color: var(--mantine-color-blue-filled);"
-  >
-    <div
-      class="m_5f6e695e mantine-Checkbox-body"
-    >
-      <div
-        class="m_26062bec mantine-Checkbox-inner"
-        data-label-position="right"
-      >
-        <input
-          checked=""
-          class="mantine-focus-auto m_26063560 mantine-Checkbox-input"
-          data-error="true"
-          id="mantine-0cyk5rcyk"
-          name="$"
-          type="checkbox"
-        />
-        <svg
-          aria-hidden="true"
-          class="m_bf295423 mantine-Checkbox-icon"
-          fill="none"
-          viewBox="0 0 10 7"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z"
-            fill="currentColor"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </div>
-      <div
-        class="m_d3ea56bb mantine-Checkbox-labelWrapper"
-      >
-        <label
-          class="m_8ee546b8 mantine-Checkbox-label"
-          for="mantine-0cyk5rcyk"
-        >
-          Checkbox
-        </label>
-        <p
-          class="m_8e8a99cc mantine-Checkbox-error m_8f816625 mantine-InputWrapper-error"
-        >
-          custom error
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`mantine checkbox hooks > renders Disabled 1`] = `
 <div>
   <style
@@ -176,7 +113,7 @@ exports[`mantine checkbox hooks > renders Error 1`] = `
         <p
           class="m_8e8a99cc mantine-Checkbox-error m_8f816625 mantine-InputWrapper-error"
         >
-          error
+          Error error
         </p>
       </div>
     </div>

package/mantine/specs/__snapshots__/fields_view_hooks.tests.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`field view hooks > renders CustomError 1`] = `
+exports[`field view hooks > renders Disabled 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -13,7 +13,6 @@ exports[`field view hooks > renders CustomError 1`] = `
   >
     <div
       class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
-      data-error="true"
     >
       <label
         class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
@@ -24,27 +23,20 @@ exports[`field view hooks > renders CustomError 1`] = `
       </label>
       <div
         class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
-        data-error="true"
+        data-disabled="true"
         data-variant="default"
-        style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2);"
       >
         <input
-          aria-describedby="mantine-0cyk5rcyk-error"
-          aria-invalid="true"
+          aria-invalid="false"
           class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
-          data-error="true"
+          data-disabled="true"
           data-variant="default"
+          disabled=""
           id="mantine-0cyk5rcyk"
           name="$"
           value="xxx"
         />
       </div>
-      <p
-        class="m_8f816625 mantine-InputWrapper-error mantine-TextInput-error"
-        id="mantine-0cyk5rcyk-error"
-      >
-        form error
-      </p>
     </div>
     <div
       class="m_6d731127 mantine-Stack-root"
@@ -52,7 +44,6 @@ exports[`field view hooks > renders CustomError 1`] = `
     >
       <div
         class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
-        data-error="true"
       >
         <label
           class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
@@ -63,27 +54,20 @@ exports[`field view hooks > renders CustomError 1`] = `
         </label>
         <div
           class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
-          data-error="true"
+          data-disabled="true"
           data-variant="default"
-          style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2);"
         >
           <input
-            aria-describedby="mantine-0px4bipx4-error"
-            aria-invalid="true"
+            aria-invalid="false"
             class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
-            data-error="true"
+            data-disabled="true"
             data-variant="default"
+            disabled=""
             id="mantine-0px4bipx4"
             name="$"
-            value="xxx"
+            value="yyy"
           />
         </div>
-        <p
-          class="m_8f816625 mantine-InputWrapper-error mantine-TextInput-error"
-          id="mantine-0px4bipx4-error"
-        >
-          sub form error
-        </p>
       </div>
       <button
         class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
@@ -105,7 +89,7 @@ exports[`field view hooks > renders CustomError 1`] = `
 </div>
 `;
 
-exports[`field view hooks > renders Disabled 1`] = `
+exports[`field view hooks > renders Empty 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -121,25 +105,22 @@ exports[`field view hooks > renders Disabled 1`] = `
     >
       <label
         class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-        for="mantine-0cyk5rcyk"
-        id="mantine-0cyk5rcyk-label"
+        for="mantine-0px4bipx4"
+        id="mantine-0px4bipx4-label"
       >
         fields view
       </label>
       <div
         class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
-        data-disabled="true"
         data-variant="default"
       >
         <input
           aria-invalid="false"
           class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
-          data-disabled="true"
           data-variant="default"
-          disabled=""
-          id="mantine-0cyk5rcyk"
+          id="mantine-0px4bipx4"
           name="$"
-          value="xxx"
+          value=""
         />
       </div>
     </div>
@@ -152,25 +133,22 @@ exports[`field view hooks > renders Disabled 1`] = `
       >
         <label
           class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-          for="mantine-0px4bipx4"
-          id="mantine-0px4bipx4-label"
+          for="mantine-12voha2vo"
+          id="mantine-12voha2vo-label"
         >
           sub fields view
         </label>
         <div
           class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
-          data-disabled="true"
           data-variant="default"
         >
           <input
             aria-invalid="false"
             class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
-            data-disabled="true"
             data-variant="default"
-            disabled=""
-            id="mantine-0px4bipx4"
+            id="mantine-12voha2vo"
             name="$"
-            value="yyy"
+            value=""
           />
         </div>
       </div>
@@ -194,7 +172,7 @@ exports[`field view hooks > renders Disabled 1`] = `
 </div>
 `;
 
-exports[`field view hooks > renders Empty 1`] = `
+exports[`field view hooks > renders Errors 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -207,27 +185,38 @@ exports[`field view hooks > renders Empty 1`] = `
   >
     <div
       class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+      data-error="true"
     >
       <label
         class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-        for="mantine-0px4bipx4"
-        id="mantine-0px4bipx4-label"
+        for="mantine-0cyk5rcyk"
+        id="mantine-0cyk5rcyk-label"
       >
         fields view
       </label>
       <div
         class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
+        data-error="true"
         data-variant="default"
+        style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2);"
       >
         <input
-          aria-invalid="false"
+          aria-describedby="mantine-0cyk5rcyk-error"
+          aria-invalid="true"
           class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+          data-error="true"
           data-variant="default"
-          id="mantine-0px4bipx4"
+          id="mantine-0cyk5rcyk"
           name="$"
-          value=""
+          value="xxx"
         />
       </div>
+      <p
+        class="m_8f816625 mantine-InputWrapper-error mantine-TextInput-error"
+        id="mantine-0cyk5rcyk-error"
+      >
+        error form error
+      </p>
     </div>
     <div
       class="m_6d731127 mantine-Stack-root"
@@ -235,27 +224,38 @@ exports[`field view hooks > renders Empty 1`] = `
     >
       <div
         class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+        data-error="true"
       >
         <label
           class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-          for="mantine-12voha2vo"
-          id="mantine-12voha2vo-label"
+          for="mantine-0px4bipx4"
+          id="mantine-0px4bipx4-label"
         >
           sub fields view
         </label>
         <div
           class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
+          data-error="true"
           data-variant="default"
+          style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2);"
         >
           <input
-            aria-invalid="false"
+            aria-describedby="mantine-0px4bipx4-error"
+            aria-invalid="true"
             class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+            data-error="true"
             data-variant="default"
-            id="mantine-12voha2vo"
+            id="mantine-0px4bipx4"
             name="$"
-            value=""
+            value="xxx"
           />
         </div>
+        <p
+          class="m_8f816625 mantine-InputWrapper-error mantine-TextInput-error"
+          id="mantine-0px4bipx4-error"
+        >
+          error sub form error
+        </p>
       </div>
       <button
         class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"