Skip to content

form.md

Latest commit

 

History

History
83 lines (64 loc) · 2.4 KB

form.md

File metadata and controls

83 lines (64 loc) · 2.4 KB
Raw

Form Component

Replaces a form's submit <button> with a native one that disables during submission.

The title of the native button will get set from the HTML <button>'s innerText. Override this by setting data-bridge-title.

Make sure to wire up the two data-action attributes to ensure the button disables while the form submission is in progress.

Form Component examples

<%= form_with model: @model, data: {
  controller: "bridge--form",
  action: "turbo:submit-start->bridge--form#submitStart turbo:submit-end->bridge--form#submitEnd"
} do |form| %>
  <%# ... %>

  <%= form.submit "Submit form", data: {
    bridge__form_target: "submit",
    bridge_title: "Submit"
  } %>
<% end %>
HTML version 
<form 
  data-controller="bridge--form"
  data-action="turbo:submit-start->bridge--form#submitStart turbo:submit-end->bridge--form#submitEnd"
  >
  <!-- ... -->

  <button
    type="submit"
    data-bridge--form-target="submit"
    data-bridge-title="Submit"
  >
    Submit form
  </button>
</form>

Customizing submit button colors

On iOS, the color of the submit button will default to your app's tint color, set via AccentColor in Assets.xcassets. Override this by adding a new color named BridgeworkFormColor. Or set all UI elements provided by this library with a new color named BridgeworkColor.

On Android, the color of the submit button will default to Material's colorOnSurface. Override this by adding a new color to colors.xml named bridgework_form_color. Or set all UI elements provided by this library with a new color named bridgework_color.

These defaults can be overridden (on both platforms) for individual submit buttons by setting a HEX code for data-bridge-color in the HTML.

<%= form_with model: @model, data: {
  controller: "bridge--form",
  bridge_color: "#804F9F"
} do |form| %>
  <%# ... %>
<% end %>
HTML version 
<form data-controller="bridge--form" data-bridge-color="#804F9F">
  <!-- ... -->
</form>

Hide the HTML submit button

Hide the HTML submit button when the "form" component is registered with the following CSS.

[data-bridge-components~="form"]
[data-controller~="bridge--form"]
[type="submit"] {
  display: none;
}