diff --git a/contents/_includes/patterns/toggle-password-visibility.njk b/contents/_includes/patterns/toggle-password-visibility.njk
new file mode 100644
index 0000000..d357caa
--- /dev/null
+++ b/contents/_includes/patterns/toggle-password-visibility.njk
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 4d0e200..6ef6110 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -100,6 +100,7 @@ eleventyExcludeFromCollections: true
{% pattern "Spin button" %}{% include "patterns/spin-button.njk" %}{% endpattern %}
{% pattern "Stepper input" %}{% include "patterns/stepper-input.njk" %}{% endpattern %}
{% pattern "Switch" %}{% include "patterns/switch.njk" %}{% endpattern %}
+ {% pattern "Toggle password visibility" %}{% include "patterns/toggle-password-visibility.njk" %}{% endpattern %}
{% pattern "Upload button" %}{% include "patterns/upload-button.njk" %}{% endpattern %}
diff --git a/contents/toggle-password-visibility.md b/contents/toggle-password-visibility.md
new file mode 100644
index 0000000..674a405
--- /dev/null
+++ b/contents/toggle-password-visibility.md
@@ -0,0 +1,65 @@
+---
+layout: layouts/post.njk
+title: Toggle password visibility
+description: Create a toggle password visibility with CSS flexbox
+keywords: css flexbox, toggle password visibilit
+---
+
+## HTML
+
+```html
+
+
+
+
+
+
+
+```
+
+## CSS
+
+```css
+.toggle-password-visibility {
+ display: flex;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ padding: 0.25rem;
+}
+
+.toggle-password-visibility__input {
+ border-color: transparent;
+
+ /* Take available width */
+ flex: 1;
+}
+
+.toggle-password-visibility__toggle {
+ /* Reset */
+ background: #fff;
+ border-color: transparent;
+
+ /* Center the content */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+```
+
+In reality, the `click` event handler of the button needs to update the `type` attribute of the input to `text` or `password`:
+
+```js
+document
+ .querySelector('.toggle-password-visibility__toggle')
+ .addEventListener('click', (e) => {
+ const input = e.target.previousElementSibling;
+ const type = input.getAttribute('type');
+ input.setAttribute('type', type === 'text' ? 'password' : 'text');
+ });
+```
+
+{% demo %}{% include "patterns/toggle-password-visibility.njk" %}{% enddemo %}
diff --git a/pages/toggle-password-visibility/index.tsx b/pages/toggle-password-visibility/index.tsx
deleted file mode 100644
index 22caeea..0000000
--- a/pages/toggle-password-visibility/index.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
- const [visible, setVisible] = React.useState(false);
- const toggle = () => setVisible((v) => !v);
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`}
- css={`
- .container {
- display: flex;
-
- /* Border */
- border: 1px solid #d1d5db;
- }
-
- .container__input {
- border-color: transparent;
- /* Take available width */
- flex: 1;
- }
- `}
- >
-
-
-
- );
-};
-
-export default Details;
diff --git a/patterns/toggle-password-visibility/Cover.tsx b/patterns/toggle-password-visibility/Cover.tsx
deleted file mode 100644
index c9c0473..0000000
--- a/patterns/toggle-password-visibility/Cover.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-
-import Circle from '../../placeholders/Circle';
-import Frame from '../../placeholders/Frame';
-
-const Cover: React.FC<{}> = () => {
- return (
-
-
-
- );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 9c884c3..c3e76db 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -78,6 +78,7 @@
@import './patterns/teardrop';
@import './patterns/three-dimensions-card';
@import './patterns/timeline';
+@import './patterns/toggle-password-visibility';
@import './patterns/tooltip';
@import './patterns/tree-diagram';
@import './patterns/triangle-buttons';
diff --git a/styles/patterns/_toggle-password-visibility.scss b/styles/patterns/_toggle-password-visibility.scss
new file mode 100644
index 0000000..eeaa1f1
--- /dev/null
+++ b/styles/patterns/_toggle-password-visibility.scss
@@ -0,0 +1,41 @@
+.toggle-password-visibility {
+ display: flex;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ padding: 0.25rem;
+
+ /* Demo */
+ height: 2.5rem;
+}
+
+.toggle-password-visibility__input {
+ border-color: transparent;
+ /* Take available width */
+ flex: 1;
+
+ /* Demo */
+ width: 6rem;
+}
+
+.toggle-password-visibility__toggle {
+ /* Reset */
+ background: #fff;
+ border-color: transparent;
+
+ /* Center the content */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.toggle-password-visibility__svg {
+ fill: none;
+ height: 1.5rem;
+ stroke: #d1d5db;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke-width: 1;
+ width: 1.5rem;
+}
\ No newline at end of file