Add password input example

nationalarchives · Jan 14, 2025 · a94b581 · a94b581
1 parent 64f50fc
commit a94b581
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/src/components/text-input/index.md b/src/components/text-input/index.md
@@ -27,3 +27,9 @@ group: components
 ## Inline
 
 {{ example({ group: "components", item: "text-input", example: "inline", html: true, nunjucks: true, size: "xxs" }) }}
+
+## Password
+
+The password text input is enhanced with JavaScript to allow the hiding and showing of the password.
+
+{{ example({ group: "components", item: "text-input", example: "password", html: true, nunjucks: true, size: "xs" }) }}
diff --git a/src/components/text-input/password/index.njk b/src/components/text-input/password/index.njk
@@ -0,0 +1,16 @@
+---
+title: Text input - password
+layout: examples/plain.njk
+private: true
+---
+
+{% from "nationalarchives/components/text-input/macro.njk" import tnaTextInput %}
+
+{{ tnaTextInput({
+  label: "Enter your password",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "password",
+  name: "password",
+  password: true
+}) }}