x
1
2
3
4
5
6
7
<div class="input input--clearable input--actor flex items-center gap" data-controller="clearable-input"> <input type="search" name="clearable_input" id="clearable_input" placeholder="Type something" data-clearable-input-target="input" /> <button type="button" class="btn btn--plain" data-action="clearable-input#clear"> <span class="icon icon--x" aria-hidden="true"></span> <span class="sr-only">Clear input</span> </button></div>
1
2
3
4
5
6
7
<div class="input input--clearable input--actor flex items-center gap" data-controller="clearable-input"> <%= search_field_tag "clearable_input", nil, placeholder: "Type something", data: { clearable_input_target: "input" } %> <button type="button" class="btn btn--plain" data-action="clearable-input#clear"> <span class="icon icon--x" aria-hidden="true"></span> <span class="sr-only">Clear input</span> </button></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.input--revealable > button > .icon { --svg: url("eye.svg");}.input--revealed > button > .icon { --svg: url("eye-off.svg");}.input--copied > button > .icon { animation: var(--animate-fade-out), var(--animate-slide-out-up); animation-duration: var(--time-500);}.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.
The javascript is avilable at clearable_input_controller.js