Css Zero Showcase
x
1
2
3
4
5
6
7
8
<div class="input input--actor flex items-center gap" data-controller="revealable-input">
  <input type="password" name="revealable_input" id="revealable_input" data-revealable-input-target="input" />
  <button class="btn btn--plain" data-action="revealable-input#reveal">
    <img aria-hidden="true" data-revealable-input-target="showIcon" hidden="hidden" src="/assets/eye-3f1f6fb1.svg" width="20" height="20" />
    <img aria-hidden="true" data-revealable-input-target="hideIcon" hidden="hidden" src="/assets/eye-off-60549f66.svg" width="20" height="20" />
    <span class="sr-only">Reveal password</span>
  </button>
</div>
1
2
3
4
5
6
7
8
<div class="input input--actor flex items-center gap" data-controller="revealable-input">
  <%= password_field_tag "revealable_input", nil, data: { revealable_input_target: "input" } %>
  <button class="btn btn--plain" data-action="revealable-input#reveal">
    <%= image_tag "eye.svg", size: 20, aria: { hidden: true }, data: { revealable_input_target: "showIcon" }, hidden: true %>
    <%= image_tag "eye-off.svg", size: 20, aria: { hidden: true }, data: { revealable_input_target: "hideIcon" }, hidden: true %>
    <span class="sr-only">Reveal password</span>
  </button>
</div>
CSS is not required or multiple files are needed, check the notes.
Java Script is not required or multiple files are needed, check the notes.

The javascript is avilable at revealable_input_controller.js