@nypl/design-system-react-components 1.0.1 → 1.0.2

package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap

@@ -0,0 +1,1842 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox renders the UI snapshot correctly 1`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="column-checkbox-group"
+>
+  <legend>
+    column
+  </legend>
+  <div
+    className="chakra-stack css-1wdv1uh"
+    data-testid="checkbox-group"
+    id="column"
+  >
+    <div
+      className="css-1xdhyk6"
+      id="column-0-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="column-0"
+          name="column"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 2
+        </span>
+      </label>
+    </div>
+    <div
+      className="css-1xdhyk6"
+      id="column-1-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="column-1"
+          name="column"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 3
+        </span>
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Checkbox renders the UI snapshot correctly 2`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="row-checkbox-group"
+>
+  <legend>
+    row
+  </legend>
+  <div
+    className="chakra-stack css-1objuxj"
+    data-testid="checkbox-group"
+    id="row"
+  >
+    <div
+      className="css-1xdhyk6"
+      id="row-0-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="row-0"
+          name="row"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 2
+        </span>
+      </label>
+    </div>
+    <div
+      className="css-1xdhyk6"
+      id="row-1-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="row-1"
+          name="row"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 3
+        </span>
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Checkbox renders the UI snapshot correctly 3`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="noLabel-checkbox-group"
+>
+  <legend>
+    no label
+  </legend>
+  <div
+    aria-label="no label"
+    className="chakra-stack css-1wdv1uh"
+    data-testid="checkbox-group"
+    id="noLabel"
+  >
+    <div
+      className="css-1xdhyk6"
+      id="noLabel-0-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="noLabel-0"
+          name="noLabel"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 2
+        </span>
+      </label>
+    </div>
+    <div
+      className="css-1xdhyk6"
+      id="noLabel-1-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="noLabel-1"
+          name="noLabel"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 3
+        </span>
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Checkbox renders the UI snapshot correctly 4`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="helperText-checkbox-group"
+>
+  <legend>
+    helperText
+  </legend>
+  <div
+    className="chakra-stack css-1wdv1uh"
+    data-testid="checkbox-group"
+    id="helperText"
+  >
+    <div
+      className="css-1xdhyk6"
+      id="helperText-0-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="helperText-0"
+          name="helperText"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 2
+        </span>
+      </label>
+    </div>
+    <div
+      className="css-1xdhyk6"
+      id="helperText-1-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="helperText-1"
+          name="helperText"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 3
+        </span>
+      </label>
+    </div>
+  </div>
+  <div
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "helper text",
+      }
+    }
+    data-isinvalid={false}
+    id="helperText-helperErrorText"
+  />
+</fieldset>
+`;
+
+exports[`Checkbox renders the UI snapshot correctly 5`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="invalidText-checkbox-group"
+>
+  <legend>
+    invalidText
+  </legend>
+  <div
+    className="chakra-stack css-1wdv1uh"
+    data-testid="checkbox-group"
+    id="invalidText"
+  >
+    <div
+      className="css-1xdhyk6"
+      id="invalidText-0-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="invalidText-0"
+          name="invalidText"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 2
+        </span>
+      </label>
+    </div>
+    <div
+      className="css-1xdhyk6"
+      id="invalidText-1-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="invalidText-1"
+          name="invalidText"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 3
+        </span>
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Checkbox renders the UI snapshot correctly 6`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="noRequiredLabel-checkbox-group"
+>
+  <legend>
+    no optional or required label
+  </legend>
+  <div
+    className="chakra-stack css-1wdv1uh"
+    data-testid="checkbox-group"
+    id="noRequiredLabel"
+  >
+    <div
+      className="css-1xdhyk6"
+      id="noRequiredLabel-0-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="noRequiredLabel-0"
+          name="noRequiredLabel"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={true}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 2
+        </span>
+      </label>
+    </div>
+    <div
+      className="css-1xdhyk6"
+      id="noRequiredLabel-1-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="noRequiredLabel-1"
+          name="noRequiredLabel"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={true}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 3
+        </span>
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Checkbox renders the UI snapshot correctly 7`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="required-checkbox-group"
+>
+  <legend>
+    required
+    <span>
+       (Required)
+    </span>
+  </legend>
+  <div
+    className="chakra-stack css-1wdv1uh"
+    data-testid="checkbox-group"
+    id="required"
+  >
+    <div
+      className="css-1xdhyk6"
+      id="required-0-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="required-0"
+          name="required"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={true}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 2
+        </span>
+      </label>
+    </div>
+    <div
+      className="css-1xdhyk6"
+      id="required-1-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="required-1"
+          name="required"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={true}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 3
+        </span>
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Checkbox renders the UI snapshot correctly 8`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="invalid-checkbox-group"
+>
+  <legend>
+    invalid
+  </legend>
+  <div
+    className="chakra-stack css-1wdv1uh"
+    data-testid="checkbox-group"
+    id="invalid"
+  >
+    <div
+      className="css-1xdhyk6"
+      id="invalid-0-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        data-invalid=""
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={true}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="invalid-0"
+          name="invalid"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          data-invalid=""
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          data-invalid=""
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 2
+        </span>
+      </label>
+    </div>
+    <div
+      className="css-1xdhyk6"
+      id="invalid-1-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        data-invalid=""
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={true}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="invalid-1"
+          name="invalid"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          data-invalid=""
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          data-invalid=""
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 3
+        </span>
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Checkbox renders the UI snapshot correctly 9`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="disabled-checkbox-group"
+>
+  <legend>
+    disabled
+  </legend>
+  <div
+    className="chakra-stack css-1wdv1uh"
+    data-testid="checkbox-group"
+    id="disabled"
+  >
+    <div
+      className="css-1xdhyk6"
+      id="disabled-0-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        data-disabled=""
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={true}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={true}
+          id="disabled-0"
+          name="disabled"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          data-disabled=""
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          data-disabled=""
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 2
+        </span>
+      </label>
+    </div>
+    <div
+      className="css-1xdhyk6"
+      id="disabled-1-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        data-disabled=""
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={true}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={true}
+          id="disabled-1"
+          name="disabled"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          data-disabled=""
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          data-disabled=""
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 3
+        </span>
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Checkbox renders the UI snapshot correctly 10`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="jsxLabels-checkbox-group"
+>
+  <legend>
+    jsxLabels
+  </legend>
+  <div
+    className="chakra-stack css-1wdv1uh"
+    data-testid="checkbox-group"
+    id="jsxLabels"
+  >
+    <div
+      className="css-1xdhyk6"
+      id="jsxLabels-0-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="jsxLabels-0"
+          name="jsxLabels"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="arts"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="css-k008qs"
+          >
+            <span>
+              Arts
+            </span>
+            <div
+              className="css-17xejub"
+            />
+            <span>
+              4
+            </span>
+          </div>
+        </span>
+      </label>
+    </div>
+    <div
+      className="css-1xdhyk6"
+      id="jsxLabels-1-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="jsxLabels-1"
+          name="jsxLabels"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="English"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="css-k008qs"
+          >
+            <span>
+              English
+            </span>
+            <div
+              className="css-17xejub"
+            />
+            <span>
+              23
+            </span>
+          </div>
+        </span>
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Checkbox renders the UI snapshot correctly 11`] = `
+<fieldset
+  className="css-2bbtg1"
+  id="chakraProps-checkbox-group"
+>
+  <legend>
+    chakraProps
+  </legend>
+  <div
+    className="chakra-stack css-1wdv1uh"
+    data-testid="checkbox-group"
+    id="chakraProps"
+  >
+    <div
+      className="css-1xdhyk6"
+      id="chakraProps-0-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="chakraProps-0"
+          name="chakraProps"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 2
+        </span>
+      </label>
+    </div>
+    <div
+      className="css-1xdhyk6"
+      id="chakraProps-1-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="chakraProps-1"
+          name="chakraProps"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 3
+        </span>
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Checkbox renders the UI snapshot correctly 12`] = `
+<fieldset
+  className="css-1u8qly9"
+  data-testid="props"
+  id="otherProps-checkbox-group"
+>
+  <legend>
+    otherProps
+  </legend>
+  <div
+    className="chakra-stack css-1wdv1uh"
+    data-testid="checkbox-group"
+    id="otherProps"
+  >
+    <div
+      className="css-1xdhyk6"
+      id="otherProps-0-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="otherProps-0"
+          name="otherProps"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 2
+        </span>
+      </label>
+    </div>
+    <div
+      className="css-1xdhyk6"
+      id="otherProps-1-wrapper"
+    >
+      <label
+        className="chakra-checkbox css-scawxr"
+        onClick={[Function]}
+      >
+        <input
+          aria-disabled={false}
+          aria-invalid={false}
+          checked={false}
+          className="chakra-checkbox__input"
+          disabled={false}
+          id="otherProps-1"
+          name="otherProps"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="checkbox"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="chakra-checkbox__control css-dnty2r"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        >
+          <svg
+            className="chakra-icon css-1vfv7ic"
+            focusable={false}
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <span
+          className="chakra-checkbox__label css-1oeb2oe"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Checkbox 3
+        </span>
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;