Attributes and Meta Tags
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.
data-turbo-track="reload"tracks the element’s HTML and performs a full page reload when it changes. Typically used to keep
data-turbo-frameidentifies the Turbo Frame to navigate. Refer to the Frames documentation for further details.
data-turbo-preloadsignals to Drive to pre-fetch the next page’s content
data-turbo-actioncustomizes the Visit action. Valid values are
advance. Can also be used with Turbo Frames to promote frame navigations to page visits.
data-turbo-permanentpersists the element between page loads. The element must have a unique
idattribute. It also serves to exclude elements from being morphed when using page refreshes with morphing
data-turbo-temporaryremoves the element before the document is cached, preventing it from reappearing when restored.
scriptelements from being re-evaluated on Visits.
data-turbo-methodchanges the link request type from the default
GET. Ideally, non-
GETrequests should be triggered with forms, but
data-turbo-methodmight be useful where a form is not possible.
data-turbo-streamspecifies that a link or form can accept a Turbo Streams response. Turbo automatically requests stream responses for form submissions with non-
data-turbo-streamallows Turbo Streams to be used with
GETrequests as well.
data-turbo-confirmpresents a confirm dialog with the given value. Can be used on
formelements or links with
data-turbo-submits-withspecifies text to display when submitting a form. Can be used on
buttonelements. 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.
Automatically Added Attributes
The following attributes are automatically added by Turbo and are useful to determine the Visit state at a given moment.
disabledis added to the form submitter while the form request is in progress, to prevent repeat submissions.
data-turbo-previewis added to the
htmlelement when displaying a preview during a Visit.
data-turbo-visit-directionis added to the
htmlelement during a visit, with a value of
none, to indicate its direction.
aria-busyis added to
turbo-frameelements when a navigation is in progress.
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
<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.