Default
The password input provides a visibility toggle that allows users to temporarily show or hide the
password to reduce input errors, especially on smaller screens or when typing complex passwords.
This pattern is suitable for login forms, account settings, and authentication flows where users need
to confirm what they’ve typed.
<form style="max-width: 400px;">
<label for="password" class="form-label">Enter Password</label>
<div class="password-wrapper">
<input
type="password"
class="form-control password-input"
name="password"
id="password"
placeholder="Password"
autocomplete="current-password"
required
/>
<button
class="password-toggle"
type="button"
aria-label="Show password"
>
<i class="ri-eye-off-line text-muted"></i>
</button>
</div>
</form>
<form style="max-width: 400px;"> <label for="password"
class="form-label">Enter Password</label> <div
class="password-wrapper"> <input type="password"
class="form-control password-input" name="password" id="password"
placeholder="Password" autocomplete="current-password" required />
<button class="password-toggle" type="button" aria-label="Show
password" > <i class="ri-eye-off-line text-muted"></i>
</button> </div> </form>
The password input uses the custom classes password-wrapper, password-input,
and password-toggle to group the field, control visibility toggling, and connect the
markup to the JavaScript behavior.
This variation integrates the password input with an input group layout, allowing the visibility
toggle to sit inline with the field. It’s useful when you want the password control to align visually
with other grouped inputs or actions while retaining the same toggle behavior.
<form style="max-width: 400px;">
<label for="password" class="form-label">Enter Password</label>
<div class="password-wrapper input-group">
<input
type="password"
class="form-control password-input rounded"
name="password"
id="password"
placeholder="Password"
autocomplete="current-password"
required
/>
<button
class="password-toggle"
type="button"
aria-label="Show password"
>
<i class="ri-eye-off-line text-muted"></i>
</button>
</div>
</form>
<form style="max-width: 400px;"> <label for="password"
class="form-label">Enter Password</label> <div
class="password-wrapper input-group"> <input type="password"
class="form-control password-input rounded" name="password"
id="password" placeholder="Password"
autocomplete="current-password" required /> <button
class="password-toggle" type="button" aria-label="Show password"
> <i class="ri-eye-off-line text-muted"></i> </button>
</div> </form>