Skip to content

List of turbo attributes

Greg Bowler edited this page Apr 16, 2025 · 1 revision

The entire functionality of Turbo is configured by adding data-turbo attributes to your HTML, to describe what parts of the page should be made dynamic and update on the client, without reloading the page.

Here is a list of all attributes that Turbo understands:

  • data-turbo on its own will update the element whenever an update happens. If the element is a <form>, or for any contained <form> elements, the submit events will be handled by Turbo. // TODO: Currently data-turbo only works directly on a form. Needs examples and tests.
  • data-turbo="update" is the default update mechanism, and is a shorthand for data-turbo="update-outer"
  • data-turbo="update-outer" - whenever an update happens, the outerHTML of the element will be updated.
  • data-turbo="update-inner" - whenever an update happens, the innerHTML of the element will be updated.
  • data-turbo="submit" - this is added to a <button> element and submits the button's form in the background when clicked.
  • data-turbo="autosave" - this converts a <button> into an "auto save" button and hides it from view. Any changes to the button's containing form automatically clicks this button and updates the page in the background.
  • data-turbo="link" - this is added to an <a> element and makes a background request to the link's URL when clicked, and updates the page accordingly. // TODO: This has no tests or examples!
Clone this wiki locally