@strictly/react-form 0.0.1 → 0.0.2

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

@@ -1,5 +1,183 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`mantine radio group 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_46b77525 mantine-InputWrapper-root mantine-RadioGroup-root"
+    data-error="true"
+  >
+    <div
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-RadioGroup-label"
+      id="mantine-1fu8n1fu8-label"
+    >
+      Radio Group
+    </div>
+    <div
+      aria-describedby="mantine-1fu8n1fu8-error"
+      aria-labelledby="mantine-1fu8n1fu8-label"
+      role="radiogroup"
+    >
+      <div
+        class="m_6d731127 mantine-Stack-root"
+        style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
+      >
+        <div
+          class="m_f3f1af94 mantine-Radio-root m_5f75b09e mantine-Radio-root"
+          data-label-position="right"
+          style="--radio-color: var(--mantine-color-blue-filled);"
+        >
+          <div
+            class="m_5f6e695e mantine-Radio-body"
+          >
+            <div
+              class="m_89c4f5e4 mantine-Radio-inner"
+              data-label-position="right"
+            >
+              <input
+                class="mantine-focus-auto m_8a3dbb89 mantine-Radio-radio"
+                id="mantine-0cyk5rcyk"
+                name="$"
+                type="radio"
+                value="1"
+              />
+              <svg
+                aria-hidden="true"
+                class="m_f3ed6b2b mantine-Radio-icon"
+                fill="none"
+                viewBox="0 0 5 5"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="2.5"
+                  cy="2.5"
+                  fill="currentColor"
+                  r="2.5"
+                />
+              </svg>
+            </div>
+            <div
+              class="m_d3ea56bb mantine-Radio-labelWrapper"
+            >
+              <label
+                class="m_8ee546b8 mantine-Radio-label"
+                for="mantine-0cyk5rcyk"
+              >
+                One
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="m_f3f1af94 mantine-Radio-root m_5f75b09e mantine-Radio-root"
+          data-checked="true"
+          data-label-position="right"
+          style="--radio-color: var(--mantine-color-blue-filled);"
+        >
+          <div
+            class="m_5f6e695e mantine-Radio-body"
+          >
+            <div
+              class="m_89c4f5e4 mantine-Radio-inner"
+              data-label-position="right"
+            >
+              <input
+                checked=""
+                class="mantine-focus-auto m_8a3dbb89 mantine-Radio-radio"
+                id="mantine-0px4bipx4"
+                name="$"
+                type="radio"
+                value="2"
+              />
+              <svg
+                aria-hidden="true"
+                class="m_f3ed6b2b mantine-Radio-icon"
+                fill="none"
+                viewBox="0 0 5 5"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="2.5"
+                  cy="2.5"
+                  fill="currentColor"
+                  r="2.5"
+                />
+              </svg>
+            </div>
+            <div
+              class="m_d3ea56bb mantine-Radio-labelWrapper"
+            >
+              <label
+                class="m_8ee546b8 mantine-Radio-label"
+                for="mantine-0px4bipx4"
+              >
+                Two
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="m_f3f1af94 mantine-Radio-root m_5f75b09e mantine-Radio-root"
+          data-label-position="right"
+          style="--radio-color: var(--mantine-color-blue-filled);"
+        >
+          <div
+            class="m_5f6e695e mantine-Radio-body"
+          >
+            <div
+              class="m_89c4f5e4 mantine-Radio-inner"
+              data-label-position="right"
+            >
+              <input
+                class="mantine-focus-auto m_8a3dbb89 mantine-Radio-radio"
+                id="mantine-12voha2vo"
+                name="$"
+                type="radio"
+                value="3"
+              />
+              <svg
+                aria-hidden="true"
+                class="m_f3ed6b2b mantine-Radio-icon"
+                fill="none"
+                viewBox="0 0 5 5"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="2.5"
+                  cy="2.5"
+                  fill="currentColor"
+                  r="2.5"
+                />
+              </svg>
+            </div>
+            <div
+              class="m_d3ea56bb mantine-Radio-labelWrapper"
+            >
+              <label
+                class="m_8ee546b8 mantine-Radio-label"
+                for="mantine-12voha2vo"
+              >
+                Three
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p
+      class="m_8f816625 mantine-InputWrapper-error mantine-RadioGroup-error"
+      id="mantine-1fu8n1fu8-error"
+    >
+      custom error
+    </p>
+  </div>
+</div>
+`;
+
 exports[`mantine radio group hooks > renders Disabled 1`] = `
 <div>
   <style
@@ -347,6 +525,184 @@ exports[`mantine radio group hooks > renders Empty 1`] = `
 </div>
 `;
 
+exports[`mantine radio group hooks > renders Error 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_46b77525 mantine-InputWrapper-root mantine-RadioGroup-root"
+    data-error="true"
+  >
+    <div
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-RadioGroup-label"
+      id="mantine-1fu8n1fu8-label"
+    >
+      Radio Group
+    </div>
+    <div
+      aria-describedby="mantine-1fu8n1fu8-error"
+      aria-labelledby="mantine-1fu8n1fu8-label"
+      role="radiogroup"
+    >
+      <div
+        class="m_6d731127 mantine-Stack-root"
+        style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
+      >
+        <div
+          class="m_f3f1af94 mantine-Radio-root m_5f75b09e mantine-Radio-root"
+          data-label-position="right"
+          style="--radio-color: var(--mantine-color-blue-filled);"
+        >
+          <div
+            class="m_5f6e695e mantine-Radio-body"
+          >
+            <div
+              class="m_89c4f5e4 mantine-Radio-inner"
+              data-label-position="right"
+            >
+              <input
+                class="mantine-focus-auto m_8a3dbb89 mantine-Radio-radio"
+                id="mantine-0cyk5rcyk"
+                name="$"
+                type="radio"
+                value="1"
+              />
+              <svg
+                aria-hidden="true"
+                class="m_f3ed6b2b mantine-Radio-icon"
+                fill="none"
+                viewBox="0 0 5 5"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="2.5"
+                  cy="2.5"
+                  fill="currentColor"
+                  r="2.5"
+                />
+              </svg>
+            </div>
+            <div
+              class="m_d3ea56bb mantine-Radio-labelWrapper"
+            >
+              <label
+                class="m_8ee546b8 mantine-Radio-label"
+                for="mantine-0cyk5rcyk"
+              >
+                One
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="m_f3f1af94 mantine-Radio-root m_5f75b09e mantine-Radio-root"
+          data-checked="true"
+          data-label-position="right"
+          style="--radio-color: var(--mantine-color-blue-filled);"
+        >
+          <div
+            class="m_5f6e695e mantine-Radio-body"
+          >
+            <div
+              class="m_89c4f5e4 mantine-Radio-inner"
+              data-label-position="right"
+            >
+              <input
+                checked=""
+                class="mantine-focus-auto m_8a3dbb89 mantine-Radio-radio"
+                id="mantine-0px4bipx4"
+                name="$"
+                type="radio"
+                value="2"
+              />
+              <svg
+                aria-hidden="true"
+                class="m_f3ed6b2b mantine-Radio-icon"
+                fill="none"
+                viewBox="0 0 5 5"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="2.5"
+                  cy="2.5"
+                  fill="currentColor"
+                  r="2.5"
+                />
+              </svg>
+            </div>
+            <div
+              class="m_d3ea56bb mantine-Radio-labelWrapper"
+            >
+              <label
+                class="m_8ee546b8 mantine-Radio-label"
+                for="mantine-0px4bipx4"
+              >
+                Two
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="m_f3f1af94 mantine-Radio-root m_5f75b09e mantine-Radio-root"
+          data-label-position="right"
+          style="--radio-color: var(--mantine-color-blue-filled);"
+        >
+          <div
+            class="m_5f6e695e mantine-Radio-body"
+          >
+            <div
+              class="m_89c4f5e4 mantine-Radio-inner"
+              data-label-position="right"
+            >
+              <input
+                class="mantine-focus-auto m_8a3dbb89 mantine-Radio-radio"
+                id="mantine-12voha2vo"
+                name="$"
+                type="radio"
+                value="3"
+              />
+              <svg
+                aria-hidden="true"
+                class="m_f3ed6b2b mantine-Radio-icon"
+                fill="none"
+                viewBox="0 0 5 5"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="2.5"
+                  cy="2.5"
+                  fill="currentColor"
+                  r="2.5"
+                />
+              </svg>
+            </div>
+            <div
+              class="m_d3ea56bb mantine-Radio-labelWrapper"
+            >
+              <label
+                class="m_8ee546b8 mantine-Radio-label"
+                for="mantine-12voha2vo"
+              >
+                Three
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p
+      class="m_8f816625 mantine-InputWrapper-error mantine-RadioGroup-error"
+      id="mantine-1fu8n1fu8-error"
+    >
+      error
+    </p>
+  </div>
+</div>
+`;
+
 exports[`mantine radio group hooks > renders Populated 1`] = `
 <div>
   <style

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

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`mantine select hooks > renders EmptySelect 1`] = `
+exports[`mantine select hooks > renders CustomErrorSelect 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -9,12 +9,13 @@ exports[`mantine select hooks > renders EmptySelect 1`] = `
   </style>
   <div
     class="m_46b77525 mantine-InputWrapper-root mantine-Select-root"
+    data-error="true"
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-Select-label"
       data-required="true"
-      for="mantine-1fu8n1fu8"
-      id="mantine-1fu8n1fu8-label"
+      for="mantine-12voha2vo"
+      id="mantine-12voha2vo-label"
     >
       Select
       <span
@@ -24,6 +25,147 @@ exports[`mantine select hooks > renders EmptySelect 1`] = `
          *
       </span>
     </label>
+    <div
+      class="m_6c018570 mantine-Input-wrapper mantine-Select-wrapper"
+      data-error="true"
+      data-pointer="true"
+      data-variant="default"
+      data-with-right-section="true"
+      style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2); --input-right-section-pointer-events: none;"
+    >
+      <input
+        aria-describedby="mantine-12voha2vo-error"
+        aria-haspopup="listbox"
+        aria-invalid="true"
+        autocomplete="off"
+        class="m_8fb7ebe7 mantine-Input-input mantine-Select-input"
+        data-error="true"
+        data-variant="default"
+        id="mantine-12voha2vo"
+        readonly=""
+        required=""
+        value="c"
+      />
+      <div
+        class="m_82577fc2 mantine-Input-section mantine-Select-section"
+        data-position="right"
+      >
+        <svg
+          class="m_2943220b mantine-ComboboxChevron-chevron"
+          data-combobox-chevron="true"
+          data-error="[object Object]"
+          fill="none"
+          viewBox="0 0 15 15"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
+    </div>
+    <p
+      class="m_8f816625 mantine-InputWrapper-error mantine-Select-error"
+      id="mantine-12voha2vo-error"
+    >
+      custom error
+    </p>
+  </div>
+  <input
+    name="$"
+    type="hidden"
+    value="c"
+  />
+</div>
+`;
+
+exports[`mantine select hooks > renders DisabledSelect 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_46b77525 mantine-InputWrapper-root mantine-Select-root"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-Select-label"
+      for="mantine-12voha2vo"
+      id="mantine-12voha2vo-label"
+    >
+      Select
+    </label>
+    <div
+      class="m_6c018570 mantine-Input-wrapper mantine-Select-wrapper"
+      data-disabled="true"
+      data-pointer="true"
+      data-variant="default"
+      data-with-right-section="true"
+      style="--input-right-section-pointer-events: none;"
+    >
+      <input
+        aria-haspopup="listbox"
+        aria-invalid="false"
+        autocomplete="off"
+        class="m_8fb7ebe7 mantine-Input-input mantine-Select-input"
+        data-disabled="true"
+        data-variant="default"
+        disabled=""
+        id="mantine-12voha2vo"
+        readonly=""
+        value="a"
+      />
+      <div
+        class="m_82577fc2 mantine-Input-section mantine-Select-section"
+        data-position="right"
+      >
+        <svg
+          class="m_2943220b mantine-ComboboxChevron-chevron"
+          data-combobox-chevron="true"
+          fill="none"
+          viewBox="0 0 15 15"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+  <input
+    disabled=""
+    name="$"
+    type="hidden"
+    value="a"
+  />
+</div>
+`;
+
+exports[`mantine select hooks > renders EmptySelect 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_46b77525 mantine-InputWrapper-root mantine-Select-root"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-Select-label"
+      for="mantine-1fu8n1fu8"
+      id="mantine-1fu8n1fu8-label"
+    >
+      Select
+    </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-Select-wrapper"
       data-pointer="true"
@@ -39,7 +181,6 @@ exports[`mantine select hooks > renders EmptySelect 1`] = `
         data-variant="default"
         id="mantine-1fu8n1fu8"
         readonly=""
-        required=""
         value=""
       />
       <div
@@ -84,17 +225,10 @@ exports[`mantine select hooks > renders InvalidSelect 1`] = `
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-Select-label"
-      data-required="true"
       for="mantine-12voha2vo"
       id="mantine-12voha2vo-label"
     >
       Select
-      <span
-        aria-hidden="true"
-        class="m_78a94662 mantine-InputWrapper-required mantine-Select-required"
-      >
-         *
-      </span>
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-Select-wrapper"
@@ -114,7 +248,6 @@ exports[`mantine select hooks > renders InvalidSelect 1`] = `
         data-variant="default"
         id="mantine-12voha2vo"
         readonly=""
-        required=""
         value=""
       />
       <div
@@ -154,6 +287,69 @@ exports[`mantine select hooks > renders InvalidSelect 1`] = `
 `;
 
 exports[`mantine select hooks > renders PopulatedSelect 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_46b77525 mantine-InputWrapper-root mantine-Select-root"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-Select-label"
+      for="mantine-12voha2vo"
+      id="mantine-12voha2vo-label"
+    >
+      Select
+    </label>
+    <div
+      class="m_6c018570 mantine-Input-wrapper mantine-Select-wrapper"
+      data-pointer="true"
+      data-variant="default"
+      data-with-right-section="true"
+      style="--input-right-section-pointer-events: none;"
+    >
+      <input
+        aria-haspopup="listbox"
+        aria-invalid="false"
+        autocomplete="off"
+        class="m_8fb7ebe7 mantine-Input-input mantine-Select-input"
+        data-variant="default"
+        id="mantine-12voha2vo"
+        readonly=""
+        value="a"
+      />
+      <div
+        class="m_82577fc2 mantine-Input-section mantine-Select-section"
+        data-position="right"
+      >
+        <svg
+          class="m_2943220b mantine-ComboboxChevron-chevron"
+          data-combobox-chevron="true"
+          fill="none"
+          viewBox="0 0 15 15"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+  <input
+    name="$"
+    type="hidden"
+    value="a"
+  />
+</div>
+`;
+
+exports[`mantine select hooks > renders RequiredSelect 1`] = `
 <div>
   <style
     data-mantine-styles="classes"

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

@@ -1,5 +1,50 @@
 // 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_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+    data-error="true"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
+      for="mantine-0cyk5rcyk"
+      id="mantine-0cyk5rcyk-label"
+    >
+      Text Input
+    </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-describedby="mantine-0cyk5rcyk-error"
+        aria-invalid="true"
+        class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+        data-error="true"
+        data-variant="default"
+        id="mantine-0cyk5rcyk"
+        name="$"
+        value="xxx"
+      />
+    </div>
+    <p
+      class="m_8f816625 mantine-InputWrapper-error mantine-TextInput-error"
+      id="mantine-0cyk5rcyk-error"
+    >
+      custom error
+    </p>
+  </div>
+</div>
+`;
+
 exports[`mantine checkbox hooks > renders Disabled 1`] = `
 <div>
   <style