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

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

@@ -0,0 +1,1550 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio Button renders the UI snapshot correctly 1`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="radio-group-column"
+>
+  <legend>
+    column
+  </legend>
+  <div
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
+    <div
+      className="chakra-stack css-1wdv1uh"
+    >
+      <div
+        className="css-1xdhyk6"
+        id="radio-2-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-2"
+            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="radio"
+            value="2"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 2
+          </span>
+        </label>
+      </div>
+      <div
+        className="css-1xdhyk6"
+        id="radio-3-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-3"
+            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="radio"
+            value="3"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 3
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 2`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="radio-group-row"
+>
+  <legend>
+    row
+  </legend>
+  <div
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
+    <div
+      className="chakra-stack css-1objuxj"
+    >
+      <div
+        className="css-1xdhyk6"
+        id="radio-2-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-2"
+            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="radio"
+            value="2"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 2
+          </span>
+        </label>
+      </div>
+      <div
+        className="css-1xdhyk6"
+        id="radio-3-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-3"
+            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="radio"
+            value="3"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 3
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 3`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="radio-group-noLabel"
+>
+  <legend>
+    no label
+  </legend>
+  <div
+    aria-label="no label"
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
+    <div
+      className="chakra-stack css-1wdv1uh"
+    >
+      <div
+        className="css-1xdhyk6"
+        id="radio-2-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-2"
+            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="radio"
+            value="2"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 2
+          </span>
+        </label>
+      </div>
+      <div
+        className="css-1xdhyk6"
+        id="radio-3-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-3"
+            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="radio"
+            value="3"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 3
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 4`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="radio-group-helperText"
+>
+  <legend>
+    helperText
+  </legend>
+  <div
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
+    <div
+      className="chakra-stack css-1wdv1uh"
+    >
+      <div
+        className="css-1xdhyk6"
+        id="radio-2-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-2"
+            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="radio"
+            value="2"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 2
+          </span>
+        </label>
+      </div>
+      <div
+        className="css-1xdhyk6"
+        id="radio-3-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-3"
+            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="radio"
+            value="3"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 3
+          </span>
+        </label>
+      </div>
+    </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[`Radio Button renders the UI snapshot correctly 5`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="radio-group-invalidText"
+>
+  <legend>
+    invalidText
+  </legend>
+  <div
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
+    <div
+      className="chakra-stack css-1wdv1uh"
+    >
+      <div
+        className="css-1xdhyk6"
+        id="radio-2-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-2"
+            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="radio"
+            value="2"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 2
+          </span>
+        </label>
+      </div>
+      <div
+        className="css-1xdhyk6"
+        id="radio-3-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-3"
+            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="radio"
+            value="3"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 3
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 6`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="radio-group-noRequiredLabel"
+>
+  <legend>
+    no optional or required label
+  </legend>
+  <div
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
+    <div
+      className="chakra-stack css-1wdv1uh"
+    >
+      <div
+        className="css-1xdhyk6"
+        id="radio-2-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            aria-required={true}
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-2"
+            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="radio"
+            value="2"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 2
+          </span>
+        </label>
+      </div>
+      <div
+        className="css-1xdhyk6"
+        id="radio-3-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            aria-required={true}
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-3"
+            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="radio"
+            value="3"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 3
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 7`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="radio-group-required"
+>
+  <legend>
+    required
+    <span>
+       (Required)
+    </span>
+  </legend>
+  <div
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
+    <div
+      className="chakra-stack css-1wdv1uh"
+    >
+      <div
+        className="css-1xdhyk6"
+        id="radio-2-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            aria-required={true}
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-2"
+            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="radio"
+            value="2"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 2
+          </span>
+        </label>
+      </div>
+      <div
+        className="css-1xdhyk6"
+        id="radio-3-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            aria-required={true}
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-3"
+            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="radio"
+            value="3"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 3
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 8`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="radio-group-invalid"
+>
+  <legend>
+    invalid
+  </legend>
+  <div
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
+    <div
+      className="chakra-stack css-1wdv1uh"
+    >
+      <div
+        className="css-1xdhyk6"
+        id="radio-2-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+          data-invalid=""
+        >
+          <input
+            aria-invalid={true}
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-2"
+            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="radio"
+            value="2"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            data-invalid=""
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            data-invalid=""
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 2
+          </span>
+        </label>
+      </div>
+      <div
+        className="css-1xdhyk6"
+        id="radio-3-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+          data-invalid=""
+        >
+          <input
+            aria-invalid={true}
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-3"
+            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="radio"
+            value="3"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            data-invalid=""
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            data-invalid=""
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 3
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 9`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="radio-group-disabled"
+>
+  <legend>
+    disabled
+  </legend>
+  <div
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
+    <div
+      className="chakra-stack css-1wdv1uh"
+    >
+      <div
+        className="css-1xdhyk6"
+        id="radio-2-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+          data-disabled=""
+        >
+          <input
+            aria-disabled={true}
+            checked={false}
+            className="chakra-radio__input"
+            disabled={true}
+            id="radio-2"
+            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="radio"
+            value="2"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            data-disabled=""
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            data-disabled=""
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 2
+          </span>
+        </label>
+      </div>
+      <div
+        className="css-1xdhyk6"
+        id="radio-3-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+          data-disabled=""
+        >
+          <input
+            aria-disabled={true}
+            checked={false}
+            className="chakra-radio__input"
+            disabled={true}
+            id="radio-3"
+            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="radio"
+            value="3"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            data-disabled=""
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            data-disabled=""
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 3
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 10`] = `
+<fieldset
+  className="css-1u8qly9"
+  id="radio-group-jsxLabels"
+>
+  <legend>
+    RadioGroup example
+  </legend>
+  <div
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
+    <div
+      className="chakra-stack css-1wdv1uh"
+    >
+      <div
+        className="css-1xdhyk6"
+        id="arts-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="arts"
+            name="a11y-test"
+            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="radio"
+            value="arts"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            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="English-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="English"
+            name="a11y-test"
+            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="radio"
+            value="English"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            <div
+              className="css-k008qs"
+            >
+              <span>
+                English
+              </span>
+              <div
+                className="css-17xejub"
+              />
+              <span>
+                23
+              </span>
+            </div>
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 11`] = `
+<fieldset
+  className="css-1y4kn3e"
+  id="radio-group-chakra"
+>
+  <legend>
+    chakra
+  </legend>
+  <div
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
+    <div
+      className="chakra-stack css-1wdv1uh"
+    >
+      <div
+        className="css-1xdhyk6"
+        id="radio-2-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-2"
+            name="chakra"
+            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="radio"
+            value="2"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 2
+          </span>
+        </label>
+      </div>
+      <div
+        className="css-1xdhyk6"
+        id="radio-3-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-3"
+            name="chakra"
+            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="radio"
+            value="3"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 3
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 12`] = `
+<fieldset
+  className="css-1u8qly9"
+  data-testid="props"
+  id="radio-group-props"
+>
+  <legend>
+    props
+  </legend>
+  <div
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
+    <div
+      className="chakra-stack css-1wdv1uh"
+    >
+      <div
+        className="css-1xdhyk6"
+        id="radio-2-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-2"
+            name="props"
+            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="radio"
+            value="2"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 2
+          </span>
+        </label>
+      </div>
+      <div
+        className="css-1xdhyk6"
+        id="radio-3-wrapper"
+      >
+        <label
+          className="chakra-radio css-13p0l12"
+        >
+          <input
+            checked={false}
+            className="chakra-radio__input"
+            disabled={false}
+            id="radio-3"
+            name="props"
+            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="radio"
+            value="3"
+          />
+          <span
+            aria-hidden={true}
+            className="css-14wybg9"
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+          />
+          <span
+            className="chakra-radio__label css-1y8kf23"
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            Radio 3
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+</fieldset>
+`;