x
1
<input type="text" name="otp_input" id="otp_input" placeholder="OTP from SMS" autocorrect="off" autocapitalize="none" required="required" autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]*" class="input" data-controller="otp-input" />1
<%= text_field_tag "otp_input", nil, placeholder: "OTP from SMS", autocorrect: "off", autocapitalize: "none", required: true, autocomplete: "one-time-code", inputmode: "numeric", pattern: "[0-9]*", class: "input", data: { controller: "otp-input" } %>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.btn--copied img { animation: var(--animate-fade-out), var(--animate-slide-out-up); animation-duration: var(--time-500);}.btn--revealed img { background-image: url("off.svg"); background-size: cover;}.input--clearable { input::-webkit-search-cancel-button { display: none; } &:has(:placeholder-shown) > button { display: none; }}
Java Script is not required or multiple files are needed, check the notes.