diff --git a/src/FluidForm/FluidForm.Story.svelte b/src/FluidForm/FluidForm.Story.svelte
index b0204601..3479678f 100644
--- a/src/FluidForm/FluidForm.Story.svelte
+++ b/src/FluidForm/FluidForm.Story.svelte
@@ -3,6 +3,9 @@
   import FluidForm from "./FluidForm.svelte";
 
   $: value = null;
+  // remove props on publish
+  export let inputInvalid = false;
+  export let passwordInvalid = false;
 </script>
 
 <FluidForm
@@ -17,6 +20,7 @@
     labelText="Text Input label"
     placeholder="Placeholder text"
     bind:value
+    invalid="{inputInvalid}"
     on:keydown="{(e) => {
       console.log('on:keydown', e);
     }}"
@@ -29,7 +33,7 @@
     type="password"
     id="test4"
     labelText="Password"
-    invalid
+    invalid="{passwordInvalid}"
     invalidText="Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
     on:keydown="{(e) => {
       console.log('on:keydown', e);
diff --git a/src/FluidForm/FluidForm.stories.js b/src/FluidForm/FluidForm.stories.js
index 9b709c55..eb4937b5 100644
--- a/src/FluidForm/FluidForm.stories.js
+++ b/src/FluidForm/FluidForm.stories.js
@@ -1,8 +1,13 @@
-import { withKnobs } from "@storybook/addon-knobs";
+import { withKnobs, boolean } from "@storybook/addon-knobs";
 import Component from "./FluidForm.Story.svelte";
 
 export default { title: "FluidForm", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
+  props: {
+    // remove props on publish
+    inputInvalid: boolean('input is invalid', false),
+    passwordInvalid: boolean('password is invalid', false)
+  }
 });
\ No newline at end of file