x
1
2
3
4
5
6
<form data-controller="form" data-action="change->form#submit" action="/slow_action" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="N2OTlGMn2RV1O1Jt4Z33_Hd1OIQHARwVhjoRLSPCr13xKSRlotcMGUm8t9pef2eHP8j_r9ExNR647jyDdoApAA" autocomplete="off" /> <div class="flex items-center gap"> <input name="status" type="hidden" value="0" autocomplete="off" /><input class="switch" role="switch" type="checkbox" value="1" name="status" id="status" /> <label class="text-sm font-medium" for="status">Airplane Mode</label> </div></form>1
2
3
4
5
6
<%= form_with url: main_app.slow_action_path, data: { controller: "form", action: "change->form#submit" } do |form| %> <div class="flex items-center gap"> <%= form.checkbox :status, checked: false, class: "switch", role: "switch" %> <%= form.label :status, "Airplane Mode", class: "text-sm font-medium" %> </div><% end %>
CSS is not required or multiple files are needed, check the notes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { Controller } from "@hotwired/stimulus"import debounce from "https://esm.sh/just-debounce-it@3.2.0?standalone"export default class extends Controller { static targets = [ "cancel" ] initialize() { this.submitLater = debounce(this.submit.bind(this), 500) } submit({ params: { submitter } }) { if (submitter) { this.element.requestSubmit(this.#find(submitter)) } else { this.element.requestSubmit() } } cancel() { this.cancelTarget?.click() } preventAttachment(event) { event.preventDefault() } #find(id) { return document.getElementById(id) || this.#notFound(id) } #notFound(id) { throw new Error(`Submitter with ID "${id}" not found`) }}No notes provided.