Hotwire.io is a community-driven effort and is not affiliated with the official Hotwire project. Click here to learn more »

Hotwire

Attributes and Meta Tags

Data Attributes

The following data attributes can be applied to elements to customize Turbo’s behaviour.

  • data-turbo="false" disables Turbo Drive on links and forms including descendants. To reenable when an ancestor has opted out, use data-turbo="true". Be careful: when Turbo Drive is disabled, browsers treat link clicks as normal, but native adapters may exit the app. Note that if Turbo ignores a path, then setting data-turbo="true" will not force/override it to enable.
  • data-turbo-track="reload" tracks the element’s HTML and performs a full page reload when it changes. Typically used to keep script and CSS link elements up-to-date.
  • data-turbo-track="dynamic" tracks the element’s HTML and removes the element when it is absent from an HTML response. Typically used to remove style and link elements during navigation.
  • data-turbo-frame identifies the Turbo Frame to navigate. Refer to the Frames documentation for further details.
  • data-turbo-preload signals to Drive to pre-fetch the next page’s content
  • data-turbo-prefetch="false" disables prefetching links when the element is hovered.
  • data-turbo-action customizes the Visit action. Valid values are replace or advance. Can also be used with Turbo Frames to promote frame navigations to page visits.
  • data-turbo-permanent persists the element between page loads. The element must have a unique id attribute. It also serves to exclude elements from being morphed when using page refreshes with morphing
  • data-turbo-temporary removes the element before the document is cached, preventing it from reappearing when restored.
  • data-turbo-eval="false" prevents inline script elements from being re-evaluated on Visits.
  • data-turbo-method changes the link request type from the default GET. Ideally, non-GET requests should be triggered with forms, but data-turbo-method might be useful where a form is not possible.
  • data-turbo-stream specifies that a link or form can accept a Turbo Streams response. Turbo automatically requests stream responses for form submissions with non-GET methods; data-turbo-stream allows Turbo Streams to be used with GET requests as well.
  • data-turbo-confirm presents a confirm dialog with the given value. Can be used on form elements or links with data-turbo-method.
  • data-turbo-submits-with specifies text to display when submitting a form. Can be used on input or button elements. While the form is submitting the text of the element will show the value of data-turbo-submits-with. After the submission, the original text will be restored. Useful for giving user feedback by showing a message like “Saving…” while an operation is in progress.
  • download opts out of Turbo since the link is for downloading files and not navigation.

Automatically Added Attributes

The following attributes are automatically added by Turbo and are useful to determine the Visit state at a given moment.

  • disabled is added to the form submitter while the form request is in progress, to prevent repeat submissions.
  • data-turbo-preview is added to the html element when displaying a preview during a Visit.
  • data-turbo-visit-direction is added to the html element during a visit, with a value of forward or back or none, to indicate its direction.
  • aria-busy is added to:
    • the html element when a visit is in progress
    • the form element when a submission is in progress.
    • the turbo-frame element when a visit or form submission is in progress within the frame.
  • busy is added to the turbo-frame element when a navigation or form submission is in progress within the frame.

Meta Tags

The following meta elements, added to the head, can be used to customize caching and Visit behavior.

Previous page: Events
Last modified: over 1 year ago Edit this page on GitHub