x
1
2
3
4
5
6
7
<div class="input input--actor input--revealable flex items-center gap" data-controller="input-revealable"> <input type="password" name="input_revealable" id="input_revealable" data-input-revealable-target="input" /> <button type="button" class="btn btn--plain" data-action="input-revealable#reveal"> <span class="icon" aria-hidden="true"></span> <span class="sr-only">Toggle password visibility</span> </button></div>1
2
3
4
5
6
7
<div class="input input--actor input--revealable flex items-center gap" data-controller="input-revealable"> <%= password_field_tag "input_revealable", nil, data: { input_revealable_target: "input" } %> <button type="button" class="btn btn--plain" data-action="input-revealable#reveal"> <span class="icon" aria-hidden="true"></span> <span class="sr-only">Toggle password visibility</span> </button></div>1
2
3
4
5
6
7
.input--revealable > button > .icon { --svg: url("eye.svg");}.input--revealed > button > .icon { --svg: url("eye-off.svg");}1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Controller } from "@hotwired/stimulus"export default class extends Controller { static targets = [ "input" ] reveal() { this.element.classList.toggle("input--revealed") this.inputTarget.type = this.#type } get #type() { return this.inputTarget.type === "text" ? "password" : "text" }}No notes provided.