From a1bb1c2c638f58a04f6a14bb926d40c56cab4779 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 25 Jun 2022 06:59:21 -0700
Subject: [PATCH] docs(fluid-form): add example "Invalid state"

---
 docs/src/pages/components/FluidForm.svx       | 19 +++++++++-----
 .../framed/FluidForm/FluidFormInvalid.svelte  | 25 +++++++++++++++++++
 2 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte

diff --git a/docs/src/pages/components/FluidForm.svx b/docs/src/pages/components/FluidForm.svx
index 80e84bdc..1bc1e4b6 100644
--- a/docs/src/pages/components/FluidForm.svx
+++ b/docs/src/pages/components/FluidForm.svx
@@ -1,19 +1,26 @@
 <script>
-  import { FluidForm, FormGroup, TextInput, PasswordInput, Button,} from "carbon-components-svelte";
+  import {
+    FluidForm,
+    TextInput,
+    PasswordInput,
+  } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
 ### Fluid form
 
+Note that the `inline` input variants cannot be used within a `FluidForm`.
+
 <FluidForm>
-  <TextInput
-    labelText="User name"
-    placeholder="Enter user name..."
-    required />
+  <TextInput labelText="User name" placeholder="Enter user name..." required />
   <PasswordInput
     required
     type="password"
     labelText="Password"
     placeholder="Enter password..."
   />
-</FluidForm>
\ No newline at end of file
+</FluidForm>
+
+### Invalid state
+
+<FileSource src="/framed/FluidForm/FluidFormInvalid" />
\ No newline at end of file
diff --git a/docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte b/docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte
new file mode 100644
index 00000000..caabd8dc
--- /dev/null
+++ b/docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte
@@ -0,0 +1,25 @@
+<script>
+  import {
+    FluidForm,
+    TextInput,
+    PasswordInput,
+  } from "carbon-components-svelte";
+
+  let password = "";
+  let invalid = false;
+
+  $: invalid = !/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/.test(password);
+</script>
+
+<FluidForm>
+  <TextInput labelText="User name" placeholder="Enter user name..." required />
+  <PasswordInput
+    bind:value="{password}"
+    invalid="{invalid}"
+    invalidText="Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
+    required
+    type="password"
+    labelText="Password"
+    placeholder="Enter password..."
+  />
+</FluidForm>