x
1
2
3
4
5
6
7
<div class="input input--clearable input--actor flex items-center gap" data-controller="input-clearable"> <input type="search" name="input_clearable" id="input_clearable" placeholder="Type something" data-input-clearable-target="input" /> <button type="button" class="btn btn--plain" data-action="input-clearable#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="input-clearable"> <%= search_field_tag "input_clearable", nil, placeholder: "Type something", data: { input_clearable_target: "input" } %> <button type="button" class="btn btn--plain" data-action="input-clearable#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
.input--clearable:has(:placeholder-shown) > button { display: none;}.input--clearable ::-webkit-search-cancel-button { display: none;}1
2
3
4
5
6
7
8
9
10
import { Controller } from "@hotwired/stimulus"export default class extends Controller { static targets = [ "input" ] clear() { this.inputTarget.value = "" this.inputTarget.focus() }}No notes provided.