Css Zero Showcase
x
1
2
3
4
5
6
<form data-controller="form" data-action="change->form#submit" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="K_uIczR2iV4XvcEaOwPJM7XIdN61qaX6dPz8LBHGgXf6Bv6yekQajloR_T7n_KXn6v1AVw2G9TyuBeNmP-XDxA" autocomplete="off" />
  <div class="flex items-center gap">
    <input type="checkbox" name="status" id="status" value="1" class="switch" role="switch" />
    <label class="text-sm font-medium" for="status">Airplane Mode</label>
  </div>
</form>
1
2
3
4
5
6
<%= form_with url: nil, data: { controller: "form", action: "change->form#submit" } do |form| %>
  <div class="flex items-center gap">
    <%= check_box_tag :status, checked: false, class: "switch", role: "switch" %>
    <%= label_tag :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
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
  static targets = [ "cancel" ]
  submit() {
    this.element.requestSubmit()
  }
  cancel() {
    this.cancelTarget?.click()
  }
  preventAttachment(event) {
    event.preventDefault()
  }
}

No notes provided.