---
category: Input
created: '2019-11-23'
description: Create a toggle password visibility with CSS flexbox
keywords: css flexbox, toggle password visibility
thumbnail: /assets/css-layout/thumbnails/toggle-password-visibility.png
title: Toggle password visibility
---

## HTML

```html index.html
<div class="toggle-password-visibility">
    <!-- Text input -->
    <input type="text" class="toggle-password-visibility__input" />

    <!-- Toggle button sticks to the right -->
    <button class="toggle-password-visibility__toggle">...</button>
</div>
```

## CSS

```css styles.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');
});
```

<Playground>
```css styles.css hidden
body {
    align-items: center;
    display: flex;
    justify-content: center;
}

.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: 16rem;
}

.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;
}
```

```html index.html hidden
<div class="toggle-password-visibility">
    <input type="text" class="toggle-password-visibility__input" value="*****" />
    <button class="toggle-password-visibility__toggle">
        <svg class="toggle-password-visibility__svg" viewBox="0 0 24 24">
            <path d="M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2"></path>
        </svg>
    </button>
</div>
```
</Playground>