diff --git a/src/components/FieldNote/FieldNote-v2.module.css b/src/components/FieldNote/FieldNote-v2.module.css
index a1d646fb1..7b93228b4 100755
--- a/src/components/FieldNote/FieldNote-v2.module.css
+++ b/src/components/FieldNote/FieldNote-v2.module.css
@@ -11,6 +11,9 @@
  * Fieldnote
  */
 .field-note {
+  display: flex;
+  align-items: center;
+  
   font: var(--eds-theme-typography-body-sm);
 
   color: var(--eds-theme-color-text-utility-default-secondary);
diff --git a/src/components/InputField/InputField-v2.stories.tsx b/src/components/InputField/InputField-v2.stories.tsx
index 8dd8aaac9..55e9f1287 100644
--- a/src/components/InputField/InputField-v2.stories.tsx
+++ b/src/components/InputField/InputField-v2.stories.tsx
@@ -28,12 +28,29 @@ export const Default: Story = {
   },
 };
 
+/**
+ * Fields, when containing text, have a theme matching the rest of the interface.
+ */
+export const WithText: Story = {
+  args: {
+    label: 'Default input field',
+    fieldNote: 'This is a fieldnote.',
+    defaultValue: 'Text value',
+  },
+};
+
+/**
+ * Fields do not required a `fieldNote`.
+ */
 export const NoFieldnote: Story = {
   args: {
     label: 'Default input field',
   },
 };
 
+/**
+ * Fields can have an error state.
+ */
 export const Error: Story = {
   args: {
     label: 'Error input field',
@@ -42,6 +59,9 @@ export const Error: Story = {
   },
 };
 
+/**
+ * Fields can have a warning state.
+ */
 export const Warning: Story = {
   args: {
     label: 'Warning input field',
@@ -51,6 +71,9 @@ export const Warning: Story = {
   },
 };
 
+/**
+ * Read-only fields can have a value and are not editable, but are different from disabled fields.
+ */
 export const ReadOnly: Story = {
   args: {
     label: 'Read-only field',
@@ -60,6 +83,9 @@ export const ReadOnly: Story = {
   },
 };
 
+/**
+ * Fields can be marked as disabled (and contain a value in such cases).
+ */
 export const Disabled: Story = {
   args: {
     label: 'Disabled input field',
@@ -75,6 +101,9 @@ export const Disabled: Story = {
   },
 };
 
+/**
+ * Fields can have a leading icon, indicating what kind of content can go into the field.
+ */
 export const LeadingIcon: Story = {
   args: {
     leadingIcon: 'search',
@@ -83,6 +112,9 @@ export const LeadingIcon: Story = {
   },
 };
 
+/**
+ * Fields can be marked as required.
+ */
 export const Required: Story = {
   args: {
     label: 'Input field with fieldNote',
@@ -92,6 +124,9 @@ export const Required: Story = {
   },
 };
 
+/**
+ * When not using a visible label with `InputField`, you must apply some time of ARIA label to the component, like `aria-label`.
+ */
 export const NoVisibleLabel: Story = {
   args: {
     'aria-label': 'Input for no visible label',
@@ -100,6 +135,9 @@ export const NoVisibleLabel: Story = {
   },
 };
 
+/**
+ * Password fields show dots instead of characters, to help with security.
+ */
 export const Password: Story = {
   args: {
     label: 'Password',
@@ -107,6 +145,9 @@ export const Password: Story = {
   },
 };
 
+/**
+ * Fields can have an optional field hint added, for extra clarity.
+ */
 export const ShowHint: Story = {
   args: {
     label: 'Field with Optional Hint',
diff --git a/src/components/InputField/__snapshots__/InputField-v2.test.tsx.snap b/src/components/InputField/__snapshots__/InputField-v2.test.tsx.snap
index 59edc9ff8..d22c9020b 100644
--- a/src/components/InputField/__snapshots__/InputField-v2.test.tsx.snap
+++ b/src/components/InputField/__snapshots__/InputField-v2.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`<InputField /> Disabled story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label input-field__label--disabled"
-        for=":ra:"
+        for=":rc:"
       >
         Disabled input field
       </label>
@@ -55,18 +55,18 @@ exports[`<InputField /> Disabled story renders snapshot 1`] = `
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":rb:"
+        aria-describedby=":rd:"
         aria-invalid="false"
         class="input"
         disabled=""
-        id=":ra:"
+        id=":rc:"
         type="text"
         value="Text in disabled field"
       />
     </div>
     <div
       class="field-note field-note--disabled"
-      id=":rb:"
+      id=":rd:"
     >
       This InputField is disabled
     </div>
@@ -84,7 +84,7 @@ exports[`<InputField /> Error story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":r4:"
+        for=":r6:"
       >
         Error input field
       </label>
@@ -93,16 +93,16 @@ exports[`<InputField /> Error story renders snapshot 1`] = `
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":r5:"
+        aria-describedby=":r7:"
         aria-invalid="true"
         class="input error"
-        id=":r4:"
+        id=":r6:"
         type="text"
       />
     </div>
     <div
       class="field-note field-note--error"
-      id=":r5:"
+      id=":r7:"
     >
       <svg
         class="icon field-note__icon"
@@ -137,7 +137,7 @@ exports[`<InputField /> InputWithin story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":rm:"
+        for=":ro:"
       >
         Input field with button inside
       </label>
@@ -148,7 +148,7 @@ exports[`<InputField /> InputWithin story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input input-field__input--input-within"
-        id=":rm:"
+        id=":ro:"
         type="text"
       />
       <div
@@ -182,7 +182,7 @@ exports[`<InputField /> LeadingIcon story renders snapshot 1`] = `
         aria-invalid="false"
         aria-label="search field"
         class="input input-field__input--leading-icon"
-        id=":rc:"
+        id=":re:"
         placeholder="Search..."
         type="text"
       />
@@ -219,7 +219,7 @@ exports[`<InputField /> NoFieldnote story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":r2:"
+        for=":r4:"
       >
         Default input field
       </label>
@@ -230,7 +230,7 @@ exports[`<InputField /> NoFieldnote story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input"
-        id=":r2:"
+        id=":r4:"
         type="text"
       />
     </div>
@@ -250,18 +250,18 @@ exports[`<InputField /> NoVisibleLabel story renders snapshot 1`] = `
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":rh:"
+        aria-describedby=":rj:"
         aria-invalid="false"
         aria-label="Input for no visible label"
         class="input"
-        id=":rg:"
+        id=":ri:"
         required=""
         type="text"
       />
     </div>
     <div
       class="field-note"
-      id=":rh:"
+      id=":rj:"
     >
       This input field has no visible label
     </div>
@@ -279,7 +279,7 @@ exports[`<InputField /> Password story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":ri:"
+        for=":rk:"
       >
         Password
       </label>
@@ -290,7 +290,7 @@ exports[`<InputField /> Password story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input"
-        id=":ri:"
+        id=":rk:"
         type="password"
       />
     </div>
@@ -308,7 +308,7 @@ exports[`<InputField /> ReadOnly story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":r8:"
+        for=":ra:"
       >
         Read-only field
       </label>
@@ -317,10 +317,10 @@ exports[`<InputField /> ReadOnly story renders snapshot 1`] = `
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":r9:"
+        aria-describedby=":rb:"
         aria-invalid="false"
         class="input"
-        id=":r8:"
+        id=":ra:"
         readonly=""
         type="text"
         value="some read-only information"
@@ -328,7 +328,7 @@ exports[`<InputField /> ReadOnly story renders snapshot 1`] = `
     </div>
     <div
       class="field-note"
-      id=":r9:"
+      id=":rb:"
     >
       This will show up like text, but not be interactive
     </div>
@@ -346,7 +346,7 @@ exports[`<InputField /> Required story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":re:"
+        for=":rg:"
       >
         Input field with fieldNote
       </label>
@@ -360,17 +360,17 @@ exports[`<InputField /> Required story renders snapshot 1`] = `
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":rf:"
+        aria-describedby=":rh:"
         aria-invalid="false"
         class="input"
-        id=":re:"
+        id=":rg:"
         required=""
         type="text"
       />
     </div>
     <div
       class="field-note"
-      id=":rf:"
+      id=":rh:"
     >
       This is a fieldnote for a required input field.
     </div>
@@ -388,7 +388,7 @@ exports[`<InputField /> ShowHint story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":rk:"
+        for=":rm:"
       >
         Field with Optional Hint
       </label>
@@ -404,7 +404,7 @@ exports[`<InputField /> ShowHint story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input"
-        id=":rk:"
+        id=":rm:"
         type="text"
       />
     </div>
@@ -486,7 +486,7 @@ exports[`<InputField /> Warning story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":r6:"
+        for=":r8:"
       >
         Warning input field
       </label>
@@ -495,16 +495,16 @@ exports[`<InputField /> Warning story renders snapshot 1`] = `
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":r7:"
+        aria-describedby=":r9:"
         aria-invalid="false"
         class="input warning"
-        id=":r6:"
+        id=":r8:"
         type="text"
       />
     </div>
     <div
       class="field-note field-note--warning"
-      id=":r7:"
+      id=":r9:"
     >
       <svg
         class="icon field-note__icon"
@@ -539,7 +539,7 @@ exports[`<InputField /> WithAMaxLength story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":ro:"
+        for=":rq:"
       >
         test label
       </label>
@@ -562,7 +562,7 @@ exports[`<InputField /> WithAMaxLength story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input error"
-        id=":ro:"
+        id=":rq:"
         maxlength="15"
         required=""
         type="text"
@@ -586,7 +586,7 @@ exports[`<InputField /> WithARecommendedLength story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":rq:"
+        for=":rs:"
       >
         Shortened Length Field
       </label>
@@ -609,7 +609,7 @@ exports[`<InputField /> WithARecommendedLength story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input error"
-        id=":rq:"
+        id=":rs:"
         required=""
         type="text"
         value="Some initial text"
@@ -632,7 +632,7 @@ exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1
     >
       <label
         class="label label--lg input-field__label"
-        for=":rs:"
+        for=":ru:"
       >
         test label
       </label>
@@ -653,10 +653,10 @@ exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":rt:"
+        aria-describedby=":rv:"
         aria-invalid="false"
         class="input error"
-        id=":rs:"
+        id=":ru:"
         maxlength="20"
         required=""
         type="text"
@@ -668,7 +668,7 @@ exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1
     >
       <div
         class="field-note field-note--error"
-        id=":rt:"
+        id=":rv:"
       >
         <svg
           class="icon field-note__icon"
@@ -693,3 +693,40 @@ exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1
   </div>
 </div>
 `;
+
+exports[`<InputField /> WithText story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div>
+    <div
+      class="input-field__overline"
+    >
+      <label
+        class="label label--lg input-field__label"
+        for=":r2:"
+      >
+        Default input field
+      </label>
+    </div>
+    <div
+      class="input-field__body input-field--has-fieldNote"
+    >
+      <input
+        aria-describedby=":r3:"
+        aria-invalid="false"
+        class="input"
+        id=":r2:"
+        type="text"
+        value="Text value"
+      />
+    </div>
+    <div
+      class="field-note"
+      id=":r3:"
+    >
+      This is a fieldnote.
+    </div>
+  </div>
+</div>
+`;