@pareto-engineering/design-system 2.0.0-alpha.61 → 2.0.0-alpha.63

package/src/__snapshots__/Storyshots.test.js.snap

@@ -3729,7 +3729,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  15 days ago
+  23 days ago
 </p>
 `;
 
@@ -11315,7 +11315,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -11335,7 +11335,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="lastName"
     >
       What's your last name ?
@@ -11354,7 +11354,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-area-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -11373,6 +11373,26 @@ exports[`Storyshots f/FormInput Base 1`] = `
       }
     />
   </div>
+  <div
+    className="base checkbox form-input"
+  >
+    <label
+      className="base form-label x-main2"
+      htmlFor="urgent"
+    >
+      Urgent
+    </label>
+    <input
+      checked={false}
+      className="input"
+      disabled={false}
+      id="urgent"
+      name="urgent"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
   <div
     className="base choices-input form-input x-background2 y-main2"
     style={
@@ -11383,7 +11403,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     }
   >
     <p
-      className="base label x-main2"
+      className="base form-label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -11394,8 +11414,9 @@ exports[`Storyshots f/FormInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-red"
+          id="colors-red"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11403,7 +11424,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
           value="red"
         />
         <label
-          htmlFor="undefined-red"
+          htmlFor="colors-red"
         >
           Color Red
         </label>
@@ -11412,8 +11433,9 @@ exports[`Storyshots f/FormInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-blue"
+          id="colors-blue"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11421,7 +11443,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
           value="blue"
         />
         <label
-          htmlFor="undefined-blue"
+          htmlFor="colors-blue"
         >
           Color Blue
         </label>
@@ -11430,8 +11452,9 @@ exports[`Storyshots f/FormInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-green"
+          id="colors-green"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11439,7 +11462,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
           value="green"
         />
         <label
-          htmlFor="undefined-green"
+          htmlFor="colors-green"
         >
           Color Green
         </label>
@@ -11450,7 +11473,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base select-input form-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -11512,7 +11535,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -11532,7 +11555,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="lastName"
     >
       What's your last name ?
@@ -11551,7 +11574,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-area-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -11580,7 +11603,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     }
   >
     <p
-      className="base label x-main2"
+      className="base form-label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -11591,8 +11614,9 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="undefined-red"
+          id="colors-red"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11600,7 +11624,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
           value="red"
         />
         <label
-          htmlFor="undefined-red"
+          htmlFor="colors-red"
         >
           Color Red
         </label>
@@ -11609,8 +11633,9 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="undefined-blue"
+          id="colors-blue"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11618,7 +11643,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
           value="blue"
         />
         <label
-          htmlFor="undefined-blue"
+          htmlFor="colors-blue"
         >
           Color Blue
         </label>
@@ -11627,8 +11652,9 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="undefined-green"
+          id="colors-green"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11636,7 +11662,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
           value="green"
         />
         <label
-          htmlFor="undefined-green"
+          htmlFor="colors-green"
         >
           Color Green
         </label>
@@ -11647,7 +11673,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base select-input form-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -11709,7 +11735,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="extended"
     >
       Extended type input
@@ -11748,7 +11774,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -11774,7 +11800,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
     }
   >
     <p
-      className="base label x-main2"
+      className="base form-label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -11785,8 +11811,9 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-red"
+          id="colors-red"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11794,7 +11821,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
           value="red"
         />
         <label
-          htmlFor="undefined-red"
+          htmlFor="colors-red"
         >
           Color Red
         </label>
@@ -11803,8 +11830,9 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-blue"
+          id="colors-blue"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11812,7 +11840,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
           value="blue"
         />
         <label
-          htmlFor="undefined-blue"
+          htmlFor="colors-blue"
         >
           Color Blue
         </label>
@@ -11821,8 +11849,9 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-green"
+          id="colors-green"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11830,7 +11859,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
           value="green"
         />
         <label
-          htmlFor="undefined-green"
+          htmlFor="colors-green"
         >
           Color Green
         </label>
@@ -11841,7 +11870,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
     className="base select-input form-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="status"
     >
       Select Task Status
@@ -11884,7 +11913,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -11910,7 +11939,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
     }
   >
     <p
-      className="base label x-main2"
+      className="base form-label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -11921,8 +11950,9 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-red"
+          id="colors-red"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11930,7 +11960,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
           value="red"
         />
         <label
-          htmlFor="undefined-red"
+          htmlFor="colors-red"
         >
           Color Red
         </label>
@@ -11939,8 +11969,9 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-blue"
+          id="colors-blue"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11948,7 +11979,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
           value="blue"
         />
         <label
-          htmlFor="undefined-blue"
+          htmlFor="colors-blue"
         >
           Color Blue
         </label>
@@ -11957,8 +11988,9 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-green"
+          id="colors-green"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11966,7 +11998,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
           value="green"
         />
         <label
-          htmlFor="undefined-green"
+          htmlFor="colors-green"
         >
           Color Green
         </label>
@@ -11977,7 +12009,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
     className="base combobox form-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="team"
       id="downshift-0-label"
     >
@@ -12020,7 +12052,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
     className="base multiple-combobox form-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="teams"
       id="downshift-1-label"
     >
@@ -12084,7 +12116,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -12104,7 +12136,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
     className="base ratings-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
+      className="base form-label input-label v50 mb-v x-main2"
       htmlFor="ratings"
     >
       Your Rating
@@ -12259,12 +12291,227 @@ exports[`Storyshots f/common/Description Base 1`] = `
 
 exports[`Storyshots f/common/Label Base 1`] = `
 <label
-  className="base label x-main2"
+  className="base form-label x-main2"
 >
   Sample Label
 </label>
 `;
 
+exports[`Storyshots f/fields/Checkbox Base 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base checkbox"
+  >
+    <input
+      checked={false}
+      className="input"
+      disabled={false}
+      id="urgent"
+      name="urgent"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/Checkbox Disabled 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base checkbox"
+  >
+    <input
+      checked={false}
+      className="input"
+      disabled={true}
+      id="urgent"
+      name="urgent"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/Checkbox Optional 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base checkbox"
+  >
+    <input
+      checked={false}
+      className="input"
+      disabled={false}
+      id="urgent"
+      name="urgent"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/Checkbox With Default Formik Value 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base checkbox"
+  >
+    <input
+      checked={false}
+      className="input"
+      disabled={false}
+      id="urgent"
+      name="urgent"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/Checkbox With Description 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base checkbox"
+  >
+    <input
+      checked={false}
+      className="input"
+      disabled={false}
+      id="urgent"
+      name="urgent"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="checkbox"
+    />
+    <div
+      className="base description v50 mt-v s-1 x-metadata"
+    >
+      Click on the checkbox
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/Checkbox With Label 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base checkbox"
+  >
+    <label
+      className="base form-label x-main2"
+      htmlFor="urgent"
+    >
+      Urgent
+    </label>
+    <input
+      checked={false}
+      className="input"
+      disabled={false}
+      id="urgent"
+      name="urgent"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
 <form
   action="#"
@@ -12288,8 +12535,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-red"
+          id="color-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12297,7 +12545,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="red"
         />
         <label
-          htmlFor="colors-red"
+          htmlFor="color-red"
         >
           Color Red
         </label>
@@ -12306,8 +12554,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-blue"
+          id="color-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12315,7 +12564,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="blue"
         />
         <label
-          htmlFor="colors-blue"
+          htmlFor="color-blue"
         >
           Color Blue
         </label>
@@ -12324,8 +12573,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-green"
+          id="color-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12333,7 +12583,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="green"
         />
         <label
-          htmlFor="colors-green"
+          htmlFor="color-green"
         >
           Color Green
         </label>
@@ -12342,8 +12592,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-yellow"
+          id="color-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12351,7 +12602,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="yellow"
         />
         <label
-          htmlFor="colors-yellow"
+          htmlFor="color-yellow"
         >
           Color Yellow
         </label>
@@ -12360,8 +12611,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-oarnge"
+          id="color-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12369,7 +12621,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="oarnge"
         />
         <label
-          htmlFor="colors-oarnge"
+          htmlFor="color-oarnge"
         >
           Color Orange
         </label>
@@ -12378,8 +12630,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-violet"
+          id="color-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12387,7 +12640,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="violet"
         />
         <label
-          htmlFor="colors-violet"
+          htmlFor="color-violet"
         >
           Color Violet
         </label>
@@ -12396,8 +12649,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-brown"
+          id="color-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12405,7 +12659,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="brown"
         />
         <label
-          htmlFor="colors-brown"
+          htmlFor="color-brown"
         >
           Color Brown
         </label>
@@ -12414,8 +12668,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-black"
+          id="color-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12423,7 +12678,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="black"
         />
         <label
-          htmlFor="colors-black"
+          htmlFor="color-black"
         >
           Color Black
         </label>
@@ -12461,7 +12716,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
     }
   >
     <p
-      className="base label x-main2"
+      className="base form-label x-main2"
     >
       Select color
     </p>
@@ -12472,8 +12727,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-red"
+          id="color-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12481,7 +12737,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="red"
         />
         <label
-          htmlFor="colors-red"
+          htmlFor="color-red"
         >
           Color Red
         </label>
@@ -12490,8 +12746,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-blue"
+          id="color-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12499,7 +12756,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="blue"
         />
         <label
-          htmlFor="colors-blue"
+          htmlFor="color-blue"
         >
           Color Blue
         </label>
@@ -12508,8 +12765,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-green"
+          id="color-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12517,7 +12775,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="green"
         />
         <label
-          htmlFor="colors-green"
+          htmlFor="color-green"
         >
           Color Green
         </label>
@@ -12526,8 +12784,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-yellow"
+          id="color-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12535,7 +12794,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="yellow"
         />
         <label
-          htmlFor="colors-yellow"
+          htmlFor="color-yellow"
         >
           Color Yellow
         </label>
@@ -12544,8 +12803,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-oarnge"
+          id="color-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12553,7 +12813,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="oarnge"
         />
         <label
-          htmlFor="colors-oarnge"
+          htmlFor="color-oarnge"
         >
           Color Orange
         </label>
@@ -12562,8 +12822,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-violet"
+          id="color-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12571,7 +12832,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="violet"
         />
         <label
-          htmlFor="colors-violet"
+          htmlFor="color-violet"
         >
           Color Violet
         </label>
@@ -12580,8 +12841,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-brown"
+          id="color-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12589,7 +12851,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="brown"
         />
         <label
-          htmlFor="colors-brown"
+          htmlFor="color-brown"
         >
           Color Brown
         </label>
@@ -12598,8 +12860,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-black"
+          id="color-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12607,7 +12870,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="black"
         />
         <label
-          htmlFor="colors-black"
+          htmlFor="color-black"
         >
           Color Black
         </label>
@@ -12645,7 +12908,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
     }
   >
     <p
-      className="base label x-main2"
+      className="base form-label x-main2"
     >
       Select color
     </p>
@@ -12656,8 +12919,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-red"
+          id="color-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12665,7 +12929,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="red"
         />
         <label
-          htmlFor="colors-red"
+          htmlFor="color-red"
         >
           Color Red
         </label>
@@ -12674,8 +12938,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-blue"
+          id="color-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12683,7 +12948,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="blue"
         />
         <label
-          htmlFor="colors-blue"
+          htmlFor="color-blue"
         >
           Color Blue
         </label>
@@ -12692,8 +12957,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-green"
+          id="color-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12701,7 +12967,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="green"
         />
         <label
-          htmlFor="colors-green"
+          htmlFor="color-green"
         >
           Color Green
         </label>
@@ -12710,8 +12976,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-yellow"
+          id="color-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12719,7 +12986,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="yellow"
         />
         <label
-          htmlFor="colors-yellow"
+          htmlFor="color-yellow"
         >
           Color Yellow
         </label>
@@ -12728,8 +12995,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-oarnge"
+          id="color-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12737,7 +13005,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="oarnge"
         />
         <label
-          htmlFor="colors-oarnge"
+          htmlFor="color-oarnge"
         >
           Color Orange
         </label>
@@ -12746,8 +13014,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-violet"
+          id="color-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12755,7 +13024,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="violet"
         />
         <label
-          htmlFor="colors-violet"
+          htmlFor="color-violet"
         >
           Color Violet
         </label>
@@ -12764,8 +13033,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-brown"
+          id="color-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12773,7 +13043,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="brown"
         />
         <label
-          htmlFor="colors-brown"
+          htmlFor="color-brown"
         >
           Color Brown
         </label>
@@ -12782,8 +13052,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-black"
+          id="color-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12791,7 +13062,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="black"
         />
         <label
-          htmlFor="colors-black"
+          htmlFor="color-black"
         >
           Color Black
         </label>
@@ -12835,8 +13106,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-red"
+          id="color-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12844,7 +13116,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="red"
         />
         <label
-          htmlFor="colors-red"
+          htmlFor="color-red"
         >
           Color Red
         </label>
@@ -12853,8 +13125,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-blue"
+          id="color-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12862,7 +13135,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="blue"
         />
         <label
-          htmlFor="colors-blue"
+          htmlFor="color-blue"
         >
           Color Blue
         </label>
@@ -12871,8 +13144,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-green"
+          id="color-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12880,7 +13154,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="green"
         />
         <label
-          htmlFor="colors-green"
+          htmlFor="color-green"
         >
           Color Green
         </label>
@@ -12889,8 +13163,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-yellow"
+          id="color-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12898,7 +13173,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="yellow"
         />
         <label
-          htmlFor="colors-yellow"
+          htmlFor="color-yellow"
         >
           Color Yellow
         </label>
@@ -12907,8 +13182,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-oarnge"
+          id="color-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12916,7 +13192,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="oarnge"
         />
         <label
-          htmlFor="colors-oarnge"
+          htmlFor="color-oarnge"
         >
           Color Orange
         </label>
@@ -12925,8 +13201,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-violet"
+          id="color-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12934,7 +13211,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="violet"
         />
         <label
-          htmlFor="colors-violet"
+          htmlFor="color-violet"
         >
           Color Violet
         </label>
@@ -12943,8 +13220,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-brown"
+          id="color-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12952,7 +13230,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="brown"
         />
         <label
-          htmlFor="colors-brown"
+          htmlFor="color-brown"
         >
           Color Brown
         </label>
@@ -12961,8 +13239,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-black"
+          id="color-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12970,7 +13249,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="black"
         />
         <label
-          htmlFor="colors-black"
+          htmlFor="color-black"
         >
           Color Black
         </label>
@@ -12991,7 +13270,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
+exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -13002,7 +13281,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
     id="colors"
     style={
       Object {
-        "--grid-columns-desktop": 2,
+        "--grid-columns-desktop": 3,
         "--grid-columns-mobile": 2,
       }
     }
@@ -13014,8 +13293,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-red"
+          id="color-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13023,7 +13303,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="red"
         />
         <label
-          htmlFor="colors-red"
+          htmlFor="color-red"
         >
           Color Red
         </label>
@@ -13032,8 +13312,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-blue"
+          id="color-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13041,7 +13322,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="blue"
         />
         <label
-          htmlFor="colors-blue"
+          htmlFor="color-blue"
         >
           Color Blue
         </label>
@@ -13050,8 +13331,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-green"
+          id="color-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13059,7 +13341,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="green"
         />
         <label
-          htmlFor="colors-green"
+          htmlFor="color-green"
         >
           Color Green
         </label>
@@ -13068,8 +13350,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-yellow"
+          id="color-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13077,7 +13360,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="yellow"
         />
         <label
-          htmlFor="colors-yellow"
+          htmlFor="color-yellow"
         >
           Color Yellow
         </label>
@@ -13086,8 +13369,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-oarnge"
+          id="color-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13095,7 +13379,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="oarnge"
         />
         <label
-          htmlFor="colors-oarnge"
+          htmlFor="color-oarnge"
         >
           Color Orange
         </label>
@@ -13104,8 +13388,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-violet"
+          id="color-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13113,7 +13398,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="violet"
         />
         <label
-          htmlFor="colors-violet"
+          htmlFor="color-violet"
         >
           Color Violet
         </label>
@@ -13122,8 +13407,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-brown"
+          id="color-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13131,7 +13417,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="brown"
         />
         <label
-          htmlFor="colors-brown"
+          htmlFor="color-brown"
         >
           Color Brown
         </label>
@@ -13140,8 +13426,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-black"
+          id="color-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13149,7 +13436,381 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="black"
         />
         <label
-          htmlFor="colors-black"
+          htmlFor="color-black"
+        >
+          Color Black
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base choices-input multiple x-background2 y-main2"
+    id="colors"
+    style={
+      Object {
+        "--grid-columns-desktop": 2,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <div
+      className="choices"
+    >
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-red"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="red"
+        />
+        <label
+          htmlFor="color-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-blue"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="blue"
+        />
+        <label
+          htmlFor="color-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-green"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="green"
+        />
+        <label
+          htmlFor="color-green"
+        >
+          Color Green
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-yellow"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="yellow"
+        />
+        <label
+          htmlFor="color-yellow"
+        >
+          Color Yellow
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-oarnge"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="oarnge"
+        />
+        <label
+          htmlFor="color-oarnge"
+        >
+          Color Orange
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-violet"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="violet"
+        />
+        <label
+          htmlFor="color-violet"
+        >
+          Color Violet
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-brown"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="brown"
+        />
+        <label
+          htmlFor="color-brown"
+        >
+          Color Brown
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-black"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="black"
+        />
+        <label
+          htmlFor="color-black"
+        >
+          Color Black
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base choices-input x-background2 y-main2"
+    id="colors"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <div
+      className="choices"
+    >
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-red"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="red"
+        />
+        <label
+          htmlFor="color-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-blue"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="blue"
+        />
+        <label
+          htmlFor="color-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-green"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="green"
+        />
+        <label
+          htmlFor="color-green"
+        >
+          Color Green
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-yellow"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="yellow"
+        />
+        <label
+          htmlFor="color-yellow"
+        >
+          Color Yellow
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-oarnge"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="oarnge"
+        />
+        <label
+          htmlFor="color-oarnge"
+        >
+          Color Orange
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-violet"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="violet"
+        />
+        <label
+          htmlFor="color-violet"
+        >
+          Color Violet
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-brown"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="brown"
+        />
+        <label
+          htmlFor="color-brown"
+        >
+          Color Brown
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-black"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="black"
+        />
+        <label
+          htmlFor="color-black"
         >
           Color Black
         </label>
@@ -13180,7 +13841,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
     className="base multiple-combobox y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="teams"
       id="downshift-4-label"
     >
@@ -13261,7 +13922,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
     className="base multiple-combobox y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="teams"
       id="downshift-5-label"
     >
@@ -13392,7 +14053,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
     className="base combobox y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="team"
       id="downshift-2-label"
     >
@@ -13472,7 +14133,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
     className="base combobox y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="team"
       id="downshift-3-label"
     >
@@ -13552,7 +14213,7 @@ exports[`Storyshots f/fields/QuerySelect Base 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="status"
     >
       Select Task Status
@@ -13595,7 +14256,7 @@ exports[`Storyshots f/fields/QuerySelect Loading Options 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="status"
     >
       Select Task Status
@@ -13638,7 +14299,7 @@ exports[`Storyshots f/fields/QuerySelect With Default Value 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="status"
     >
       Select Task Status
@@ -13681,7 +14342,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
     className="base ratings-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
+      className="base form-label input-label v50 mb-v x-main2"
       htmlFor="ratings"
     >
       Your Rating
@@ -13830,7 +14491,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
     className="base ratings-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
+      className="base form-label input-label v50 mb-v x-main2"
       htmlFor="ratings"
     >
       Your Rating
@@ -14014,7 +14675,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
     className="base ratings-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
+      className="base form-label input-label v50 mb-v x-main2"
       htmlFor="ratings"
     >
       Your Rating
@@ -14188,7 +14849,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -14256,7 +14917,7 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -14324,7 +14985,7 @@ exports[`Storyshots f/fields/SelectInput Required 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -14392,7 +15053,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -14481,7 +15142,7 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -14525,7 +15186,7 @@ exports[`Storyshots f/fields/TextInput Date 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="date"
       >
         Select date
@@ -14569,7 +15230,7 @@ exports[`Storyshots f/fields/TextInput Time 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="time"
       >
         Select time
@@ -14613,7 +15274,7 @@ exports[`Storyshots f/fields/TextInput With Auto Complete Off 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -14658,7 +15319,7 @@ exports[`Storyshots f/fields/TextInput With Disabled 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -14702,7 +15363,7 @@ exports[`Storyshots f/fields/TextInput With Placeholder 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -14747,7 +15408,7 @@ exports[`Storyshots f/fields/TextInput With Validation 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -14788,7 +15449,7 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?
@@ -14832,7 +15493,7 @@ exports[`Storyshots f/fields/TextareaInput Disable Resize 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?
@@ -14876,7 +15537,7 @@ exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?
@@ -14920,7 +15581,7 @@ exports[`Storyshots f/fields/TextareaInput Horizontal Resize 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?
@@ -14964,7 +15625,7 @@ exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?
@@ -15009,7 +15670,7 @@ exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?
@@ -15053,7 +15714,7 @@ exports[`Storyshots f/fields/TextareaInput Vertical Resize 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?