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, usedata-turbo="true"
. Be careful: when Turbo Drive is disabled, browsers treat link clicks as normal, but native adapters may exit the app.data-turbo-track="reload"
tracks the element’s HTML and performs a full page reload when it changes. Typically used to keepscript
and CSSlink
elements up-to-date.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 contentdata-turbo-action
customizes the Visit action. Valid values arereplace
oradvance
. 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 uniqueid
attribute. It also serves to exclude elements from being morphed when using page refreshes with morphingdata-turbo-temporary
removes the element before the document is cached, preventing it from reappearing when restored.data-turbo-eval="false"
prevents inlinescript
elements from being re-evaluated on Visits.data-turbo-method
changes the link request type from the defaultGET
. Ideally, non-GET
requests should be triggered with forms, butdata-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 withGET
requests as well.data-turbo-confirm
presents a confirm dialog with the given value. Can be used onform
elements or links withdata-turbo-method
.data-turbo-submits-with
specifies text to display when submitting a form. Can be used oninput
orbutton
elements. While the form is submitting the text of the element will show the value ofdata-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.
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 thehtml
element when displaying a preview during a Visit.data-turbo-visit-direction
is added to thehtml
element during a visit, with a value offorward
orback
ornone
, to indicate its direction.aria-busy
is added tohtml
andturbo-frame
elements when a navigation is in progress.
Meta Tags
The following meta
elements, added to the head
, can be used to customize caching and Visit behavior.
<meta name="turbo-cache-control">
to opt out of caching.<meta name="turbo-visit-control" content="reload">
will perform a full page reload whenever Turbo navigates to the page, including when the request originates from a<turbo-frame>
.<meta name="turbo-root">
to scope Turbo Drive to a particular root location.<meta name="view-transition" content="same-origin">
to trigger view transitions on browsers that support the View Transition API.<meta name="turbo-refresh-method" content="morph">
will configure page refreshes with morphing.<meta name="turbo-refresh-scroll" content="preserve">
will enable scroll preservation during page refreshes.