diff --git a/gallery/package.json b/gallery/package.json
index 99471cee11..163fe65a12 100644
--- a/gallery/package.json
+++ b/gallery/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sonatype/react-shared-components-gallery",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "description": "Gallery application to demonstrate usage and look of Sonatype shared UI components",
   "main": "src/main.ts",
   "scripts": {
diff --git a/gallery/src/pageConfig.ts b/gallery/src/pageConfig.ts
index 717f9c0f57..cf12a32dc1 100644
--- a/gallery/src/pageConfig.ts
+++ b/gallery/src/pageConfig.ts
@@ -33,7 +33,7 @@ import NxIconPage from './styles/NxIcon/NxIconPage';
 import NxFontAwesomeIconPage from './components/NxFontAwesomeIcon/NxFontAwesomeIconPage';
 import NxCounterPage from './styles/NxCounter/NxCounterPage';
 import NxThreatNumberPage from './styles/NxThreatNumber/NxThreatNumberPage';
-//import NxFormLayoutPage from './styles/NxFormLayout/NxFormLayoutPage';
+import NxFormLayoutPage from './styles/NxFormLayout/NxFormLayoutPage';
 import NxSubmitMaskPage from './components/NxSubmitMask/NxSubmitMaskPage';
 import NxStatefulSubmitMaskPage from './components/NxStatefulSubmitMask/NxStatefulSubmitMaskPage';
 import NxTablePage from './components/NxTable/NxTablePage';
@@ -134,7 +134,7 @@ const pageConfig: PageConfig = {
     'nx-truncate-ellipsis': NxTruncatePage
   },
   'Layout Examples': {
-    //'Form Layout Styles': NxFormLayoutPage,
+    'Form Layout Styles': NxFormLayoutPage,
     'Page Layout': PageLayoutPage
   },
   'JavaScript & TypeScript Utilities': {
diff --git a/gallery/src/styles/NxFormLayout/NxFormHorizontalLayoutExample.tsx b/gallery/src/styles/NxFormLayout/NxFormHorizontalLayoutExample.tsx
index c28b5a2458..b4a4cb30e0 100644
--- a/gallery/src/styles/NxFormLayout/NxFormHorizontalLayoutExample.tsx
+++ b/gallery/src/styles/NxFormLayout/NxFormHorizontalLayoutExample.tsx
@@ -4,53 +4,87 @@
  * the terms of the Eclipse Public License 2.0 which accompanies this
  * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
  */
-import React from 'react';
+import React, { FormEvent, useState } from 'react';
 
 import { NxCheckbox } from '@sonatype/react-shared-components';
 import { NxRadio } from '@sonatype/react-shared-components';
-
-import { NxFontAwesomeIcon } from '@sonatype/react-shared-components';
-import { faCalendar } from '@fortawesome/free-solid-svg-icons';
+import { NxButton } from '@sonatype/react-shared-components';
+import { NxStatefulTextInput } from '@sonatype/react-shared-components';
+import { NxInfoAlert } from '@sonatype/react-shared-components';
 
 export default function NxFormLayoutExample() {
+  function validator(val: string) {
+    return val.length ? null : 'Must be non-empty';
+  }
+
+  const [isRed, setIsRed] = useState(false),
+      [isBlue, setIsBlue] = useState(false),
+      [isGreen, setIsGreen] = useState(false),
+      toggleRed = () => setIsRed(!isRed),
+      toggleBlue = () => setIsBlue(!isBlue),
+      toggleGreen = () => setIsGreen(!isGreen);
+
+  const [color, setColor] = useState<string | null>(null);
+
+  function onSubmit(evt: FormEvent) {
+    evt.preventDefault();
+    alert('Submitted!');
+  }
+
   return (
-    <form className="nx-form">
+    <form className="nx-form" onSubmit={onSubmit}>
       <div className="nx-form-row">
         <div className="nx-form-group">
           <label className="nx-label">
-            <span className="nx-label__text">Horizontal layout</span>
-            <span className="nx-sub-label">
-              <NxFontAwesomeIcon icon={faCalendar}/>
-              <span>Sub-label with icon.</span>
-            </span>
-            <input type="text" className="nx-text-input"/>
+            <span className="nx-label__text">Label</span>
+            <NxStatefulTextInput validator={validator}/>
           </label>
         </div>
         <div className="nx-form-group">
-          <label className="nx-label">
-            <span className="nx-label__text">Second column</span>
-            <span className="nx-sub-label">This is a sub-label.</span>
-            <input type="text" className="nx-text-input"/>
+          <label className="nx-label nx-label--optional">
+            <span className="nx-label__text">Label</span>
+            <NxStatefulTextInput/>
           </label>
         </div>
-        <div className="nx-form-group">
-          <button className="nx-btn" type="button">Button</button>
-        </div>
-      </div>
-      <div className="nx-form-row">
-        <fieldset className="nx-fieldset">
-          <legend className="nx-label nx-label--optional">Checkboxes</legend>
-          <NxCheckbox isChecked={false}>Checkbox 1</NxCheckbox>
-          <NxCheckbox isChecked={true}>Checkbox 2</NxCheckbox>
-          <NxCheckbox isChecked={false}>Checkbox 3</NxCheckbox>
-        </fieldset>
-        <fieldset className="nx-fieldset">
-          <legend className="nx-label">Radio buttons</legend>
-          <NxRadio name="demo1" value="demo1" isChecked={true}>Radio Button 1</NxRadio>
-          <NxRadio name="demo2" value="demo2" isChecked={false}>Radio Button 2</NxRadio>
-          <NxRadio name="demo3" value="demo3" isChecked={true}>Radio Button 3</NxRadio>
-        </fieldset>
       </div>
+      <fieldset className="nx-fieldset">
+        <legend className="nx-legend">
+          <span className="nx-legend__text">
+            Checkboxes
+          </span>
+        </legend>
+        <NxCheckbox onChange={toggleRed} isChecked={isRed}>Red</NxCheckbox>
+        <NxCheckbox onChange={toggleBlue} isChecked={isBlue}>Blue</NxCheckbox>
+        <NxCheckbox onChange={toggleGreen} isChecked={isGreen}>Green</NxCheckbox>
+      </fieldset>
+      <fieldset className="nx-fieldset">
+        <legend className="nx-legend"><span className="nx-legend__text">Radio buttons</span></legend>
+        <NxRadio name="color"
+                 value="red"
+                 onChange={setColor}
+                 isChecked={color === 'red'}>
+          Red
+        </NxRadio>
+        <NxRadio name="color"
+                 value="purple"
+                 onChange={setColor}
+                 isChecked={color === 'purple'}>
+          Purple
+        </NxRadio>
+        <NxRadio name="color" value="green" onChange={setColor} isChecked={color === 'green'}>
+          Green
+        </NxRadio>
+        <NxRadio name="color" value="blue" onChange={setColor} isChecked={color === 'blue'}>
+          Blue
+        </NxRadio>
+      </fieldset>
+      <footer className="nx-form-footer">
+        <NxInfoAlert>This is a sample alert message</NxInfoAlert>
+        <div className="nx-btn-bar">
+          <NxButton type="button">Cancel</NxButton>
+          <NxButton variant="primary" type="submit">Submit</NxButton>
+        </div>
+      </footer>
     </form>
   );
 }
diff --git a/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx b/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx
index 7d176cb34c..d0cccf20b3 100644
--- a/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx
+++ b/gallery/src/styles/NxFormLayout/NxFormLayoutExample.tsx
@@ -4,61 +4,104 @@
  * the terms of the Eclipse Public License 2.0 which accompanies this
  * distribution and is available at https://www.eclipse.org/legal/epl-2.0/.
  */
-import React from 'react';
+import React, { FormEvent, useState } from 'react';
 
 import { NxCheckbox } from '@sonatype/react-shared-components';
 import { NxRadio } from '@sonatype/react-shared-components';
+import { NxStatefulTextInput } from '@sonatype/react-shared-components';
+import { NxButton } from '@sonatype/react-shared-components';
+import { faCalendar } from '@fortawesome/free-solid-svg-icons';
+import { NxFontAwesomeIcon } from '@sonatype/react-shared-components';
 
 export default function NxFormLayoutExample() {
+  function validator(val: string) {
+    return val.length ? null : 'Must be non-empty';
+  }
+
+  const [isRed, setIsRed] = useState(false),
+      [isBlue, setIsBlue] = useState(false),
+      [isGreen, setIsGreen] = useState(false),
+      toggleRed = () => setIsRed(!isRed),
+      toggleBlue = () => setIsBlue(!isBlue),
+      toggleGreen = () => setIsGreen(!isGreen);
+
+  const [color, setColor] = useState<string | null>(null);
+
+  function onSubmit(evt: FormEvent) {
+    evt.preventDefault();
+    alert('Submitted!');
+  }
+
   return (
-    <form className="nx-form">
+    <form className="nx-form" onSubmit={onSubmit}>
       <div className="nx-form-group">
         <label className="nx-label">
           <span className="nx-label__text">Label</span>
-          <input type="text" className="nx-text-input"/>
+          <NxStatefulTextInput validator={validator}/>
         </label>
       </div>
       <div className="nx-form-group">
         <label className="nx-label nx-label--optional">
           <span className="nx-label__text">Label</span>
-          <input type="text" className="nx-text-input"/>
+          <NxStatefulTextInput/>
         </label>
       </div>
       <div className="nx-form-group">
         <label className="nx-label nx-label--optional">
           <span className="nx-label__text">Long field</span>
-          <span className="nx-sub-label">This is a sub-label. The field element below is wider than the default.</span>
-          <input type="text" className="nx-text-input nx-text-input--long"/>
+          <span className="nx-sub-label">
+            <NxFontAwesomeIcon icon={faCalendar}/>
+            <span>This is a sub-label. The field element below is wider than the default.</span>
+          </span>
+          <NxStatefulTextInput className="nx-text-input--long"/>
         </label>
       </div>
       <fieldset className="nx-fieldset">
-        <legend className="nx-label">Checkboxes</legend>
-        <NxCheckbox isChecked={false}>Checkbox 1</NxCheckbox>
-        <NxCheckbox isChecked={true}>Checkbox 2</NxCheckbox>
-        <NxCheckbox isChecked={false}>Checkbox 3</NxCheckbox>
+        <legend className="nx-legend">
+          <span className="nx-legend__text">
+            Checkboxes
+          </span>
+        </legend>
+        <NxCheckbox onChange={toggleRed} isChecked={isRed}>Red</NxCheckbox>
+        <NxCheckbox onChange={toggleBlue} isChecked={isBlue}>Blue</NxCheckbox>
+        <NxCheckbox onChange={toggleGreen} isChecked={isGreen}>Green</NxCheckbox>
       </fieldset>
       <fieldset className="nx-fieldset">
-        <legend className="nx-label">Radio buttons</legend>
-        <NxRadio name="demo1" value="demo1" isChecked={true}>Radio Button 1</NxRadio>
-        <NxRadio name="demo2" value="demo2" isChecked={false}>Radio Button 2</NxRadio>
-        <NxRadio name="demo3" value="demo3" isChecked={true}>Radio Button 3</NxRadio>
+        <legend className="nx-legend nx-legend--optional">
+          <span className="nx-legend__text">Radio buttons</span>
+          <span className="nx-sub-label">Sub-label</span>
+        </legend>
+        <NxRadio name="color"
+                 value="red"
+                 onChange={setColor}
+                 isChecked={color === 'red'}>
+          Red
+        </NxRadio>
+        <NxRadio name="color"
+                 value="purple"
+                 onChange={setColor}
+                 isChecked={color === 'purple'}>
+          Purple
+        </NxRadio>
+        <NxRadio name="color" value="green" onChange={setColor} isChecked={color === 'green'}>
+          Green
+        </NxRadio>
+        <NxRadio name="color" value="blue" onChange={setColor} isChecked={color === 'blue'}>
+          Blue
+        </NxRadio>
       </fieldset>
       <div className="nx-form-group">
         <label className="nx-label">
           <span className="nx-label__text">Textarea</span>
-          <textarea className="nx-text-input"></textarea>
+          <NxStatefulTextInput type="textarea" placeholder="placeholder"/>
         </label>
       </div>
-      <div className="nx-form-group">
-        <label className="nx-label">
-          <span className="nx-label__text">Long Textarea</span>
-          <textarea className="nx-text-input nx-text-input--long"></textarea>
-        </label>
-      </div>
-      <div className="nx-btn-bar nx-btn-bar--forms">
-        <button className="nx-btn nx-btn--primary">Submit</button>
-        <button className="nx-btn">Cancel</button>
-      </div>
+      <footer className="nx-form-footer">
+        <div className="nx-btn-bar">
+          <NxButton type="button">Cancel</NxButton>
+          <NxButton variant="primary" type="submit">Submit</NxButton>
+        </div>
+      </footer>
     </form>
   );
 }
diff --git a/gallery/src/styles/NxFormLayout/NxFormLayoutPage.tsx b/gallery/src/styles/NxFormLayout/NxFormLayoutPage.tsx
index 6c9b326f09..ad055285fc 100644
--- a/gallery/src/styles/NxFormLayout/NxFormLayoutPage.tsx
+++ b/gallery/src/styles/NxFormLayout/NxFormLayoutPage.tsx
@@ -6,14 +6,13 @@
  */
 import React from 'react';
 
-import { GalleryDescriptionTile } from '../../gallery-components/GalleryTiles';
-import { GalleryTile } from '../../gallery-components/GalleryTiles';
-import CodeExample from '../../CodeExample';
+import { GalleryDescriptionTile, GalleryExampleTile } from '../../gallery-components/GalleryTiles';
+
 import NxFormLayoutExample from './NxFormLayoutExample';
 import NxFormHorizontalLayoutExample from './NxFormHorizontalLayoutExample';
 
-const NxFormLayoutCode = require('!!raw-loader!./NxFormLayoutExample').default,
-    NxFormHorizontalLayoutCode = require('!!raw-loader!./NxFormHorizontalLayoutExample').default;
+const NxFormLayoutCode = require('!!raw-loader!./NxFormLayoutExample').default;
+const NxFormHorizontalLayoutCode = require('!!raw-loader!./NxFormHorizontalLayoutExample').default;
 
 const NxFormLayoutPage = () =>
   <>
@@ -107,15 +106,19 @@ const NxFormLayoutPage = () =>
       </table>
     </GalleryDescriptionTile>
 
-    <GalleryTile title="NX Form Layout Example">
-      <NxFormLayoutExample />
-      <CodeExample content={NxFormLayoutCode}/>
-    </GalleryTile>
+    <GalleryExampleTile title="General Example"
+                        codeExamples={NxFormLayoutCode}
+                        liveExample={NxFormLayoutExample}>
+      This example shows a standard vertical form layout with validation on some fields.
+    </GalleryExampleTile>
 
-    <GalleryTile title="NX Form Horizontal Layout Example">
-      <NxFormHorizontalLayoutExample />
-      <CodeExample content={NxFormHorizontalLayoutCode}/>
-    </GalleryTile>
+    <GalleryExampleTile title="Horizontal form layout"
+                        liveExample={NxFormHorizontalLayoutExample}
+                        codeExamples={NxFormHorizontalLayoutCode}>
+      This example demonstrates a form layout with horizontally placed text input fields. Note that the checkbox and
+      radio fieldsets remain vertically separated, they should not be placed side-by-side. This example also
+      demonstrates the use of an <code className="nx-code">NxErrorAlert</code> in the footer.
+    </GalleryExampleTile>
   </>;
 
 export default NxFormLayoutPage;
diff --git a/lib/package.json b/lib/package.json
index f8f8debead..d4cc6d2426 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sonatype/react-shared-components",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "description": "Sonatype shared UI components and utilities written in React",
   "main": "index.js",
   "repository": {
diff --git a/lib/src/base-styles/_nx-btn-bar.scss b/lib/src/base-styles/_nx-btn-bar.scss
index efdc3e22ff..8c0e06b375 100644
--- a/lib/src/base-styles/_nx-btn-bar.scss
+++ b/lib/src/base-styles/_nx-btn-bar.scss
@@ -9,4 +9,5 @@
   @include container-horizontal;
 
   margin: $nx-spacing-sm 0;
+  text-align: right;
 }
diff --git a/lib/src/base-styles/_nx-forms.scss b/lib/src/base-styles/_nx-forms.scss
index fdbcd7d94b..c98f8e665d 100644
--- a/lib/src/base-styles/_nx-forms.scss
+++ b/lib/src/base-styles/_nx-forms.scss
@@ -10,88 +10,74 @@
 
 .nx-form {
   @include container-vertical;
-  border-top: $nx-border-dark;
-  margin: 0;
-  padding-top: 20px;
-  position: relative; // to make a containing block for validation popovers
+  margin: $nx-spacing-xl 0;
 }
 
-.nx-form--simple {
-  border-top: none;
-  padding: 0;
-}
+.nx-form-footer {
+  @include container-vertical;
+
+  border-top: 1px solid #e9e9e9;
+  padding: $nx-spacing-l 0;
 
-// for a form that is the entirety of a modal
-.nx-form--modal-form {
-  padding-top: 0;
+  .nx-alert {
+    margin-bottom: $nx-spacing-l;
+  }
 }
 
 .nx-form-group {
-  margin-bottom: 20px;
+  margin-bottom: $nx-spacing-xs;
 }
 
 .nx-form-row {
   @include container-horizontal;
-  margin-bottom: 24px;
+  margin-bottom: $nx-spacing-xs;
 
-  .nx-form-group, .nx-fieldset {
+  .nx-form-group {
     display: inline-block;
-    margin-right: 24px;
-    margin-bottom: 0;
-    vertical-align: bottom; // fixes issue where certain form types display lower
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-
-  .nx-label {
+    margin-right: $nx-spacing-l;
     margin-bottom: 0;
   }
 }
 
-.nx-btn-bar--forms {
-  border-top: $nx-border-dark;
-  padding-top: 8px;
-}
-
 // labels
 
 .nx-label, .nx-legend {
-  @include semi-bold();
-
-  color: $nx-text-color;
   display: block;
-  font-size: $nx-font-size;
-  margin-bottom: $nx-spacing-xs;
-
-  .disabled {
-    color: $nx-grey-4;
-  }
+  padding: 0;
 
   .nx-text-input, .nx-textarea {
     display: block;
-    margin-top: $nx-spacing-xs;
   }
 }
 
-.nx-label--optional {
-  .nx-label__text::after {
+.nx-label__text, .nx-legend__text {
+  @include bold();
+
+  cursor: default;
+  display: block;
+  margin-bottom: $nx-spacing-xs;
+}
+
+.nx-label--optional, .nx-legend--optional {
+  .nx-label__text::after, .nx-legend__text::after {
     @include regular();
 
     color: $nx-text-color-light;
-    content: " - optional";
+    content: "Optional";
+    font-size: $nx-font-size-xs;
     font-style: italic;
+    margin-left: $nx-spacing-xxs;
   }
 }
 
 .nx-sub-label {
   @include container-horizontal;
-  @include regular();
+  @include semi-bold();
 
   color: $nx-text-color;
+  font-size: $nx-font-size-s;
   display: block;
-  font-size: 14px;
+  margin-bottom: $nx-spacing-md;
 }
 
 // Defining labels for groups of radio buttons or checkboxes is tricky - each individual radio has a <label>
@@ -105,4 +91,3 @@
   margin: 0 0 $nx-spacing-xl 0;
   padding: 0;
 }
-
diff --git a/lib/src/base-styles/_nx-typography.scss b/lib/src/base-styles/_nx-typography.scss
index 8863c0bc70..5f043b27a5 100644
--- a/lib/src/base-styles/_nx-typography.scss
+++ b/lib/src/base-styles/_nx-typography.scss
@@ -82,13 +82,6 @@
   margin-bottom: $nx-spacing-md;
 }
 
-.nx-label {
-  @include semi-bold();
-
-  cursor: default;
-  font-size: 16px;
-}
-
 // Form typography
 .nx-text-input__input {
   @include regular();
diff --git a/lib/src/components/NxTextInput/NxTextInput.scss b/lib/src/components/NxTextInput/NxTextInput.scss
index ea5dadf860..84cf0dab89 100644
--- a/lib/src/components/NxTextInput/NxTextInput.scss
+++ b/lib/src/components/NxTextInput/NxTextInput.scss
@@ -35,5 +35,6 @@
 .nx-text-input__invalid-message {
   color: #cd0028;
   font-size: $nx-font-size-xs;
+  line-height: 16px;
   margin-top: $nx-spacing-xs;
 }