diff --git a/docs/reference/actions.md b/docs/reference/actions.md
index 41a88c70..aebae6ab 100644
--- a/docs/reference/actions.md
+++ b/docs/reference/actions.md
@@ -65,11 +65,71 @@ input type=submit | click
select | change
textarea | input
+
+## KeyboardEvent Filter
+
+There may be cases where [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) Actions should only call the Controller method when certain keystrokes are used.
+
+You can install an event listener that responds only to the `Escape` key by adding `.esc` to the event name of the action descriptor, as in the following example.
+
+```html
+
+
+```
+
+This will only work if the event being fired is a keyboard event.
+
+The correspondence between these filter and keys is shown below.
+
+Filter | Key Name
+-------- | --------
+enter | Enter
+tab | Tab
+esc | Escape
+space | " "
+up | ArrowUp
+down | ArrowDown
+left | ArrowLeft
+right | ArrowRight
+home | Home
+end | End
+[a-z] | [a-z]
+[0-9] | [0-9]
+
+If you need to support other keys, you can customize the modifiers using a custom schema.
+
+```javascript
+import { Application, defaultSchema } from "@hotwired/stimulus"
+
+const customSchema = {
+ ...defaultSchema,
+ keyMappings: { ...defaultSchema.keyMappings, at: "@" },
+}
+
+const app = Application.start(document.documentElement, customSchema)
+```
+
+If you want to subscribe to a compound filter using a modifier key, you can write it like `ctrl+a`.
+
+```html
+
...
+```
+
+The list of supported modifier keys is shown below.
+
+| Modifier | Notes |
+| -------- | ------------------ |
+| `alt` | `option` on MacOS |
+| `ctrl` | |
+| `meta` | Command key on MacOS |
+| `shift` | |
+
### Global Events
Sometimes a controller needs to listen for events dispatched on the global `window` or `document` objects.
-You can append `@window` or `@document` to the event name in an action descriptor to install the event listener on `window` or `document`, respectively, as in the following example:
+You can append `@window` or `@document` to the event name (along with any filter modifer) in an action descriptor to install the event listener on `window` or `document`, respectively, as in the following example:
diff --git a/examples/controllers/tabs_controller.js b/examples/controllers/tabs_controller.js
new file mode 100644
index 00000000..f78ac5eb
--- /dev/null
+++ b/examples/controllers/tabs_controller.js
@@ -0,0 +1,44 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+ static targets = [ "tab", "tabpanel" ]
+ static classes = [ "current" ]
+ static values = { index: { default: 0, type: Number } }
+
+ next() {
+ if (this.indexValue < this.lastIndex) {
+ this.indexValue++
+ return
+ }
+ this.indexValue = 0
+ }
+
+ previous() {
+ if (this.indexValue > 0) {
+ this.indexValue--
+ return
+ }
+ this.indexValue = this.lastIndex
+ }
+
+ open(evt) {
+ this.indexValue = this.tabTargets.indexOf(evt.currentTarget)
+ }
+
+ get lastIndex() {
+ return this.tabTargets.length - 1
+ }
+
+ indexValueChanged(current, old) {
+ let panels = this.tabpanelTargets
+ let tabs = this.tabTargets
+
+ if (old != null) {
+ panels[old].classList.remove(...this.currentClasses)
+ tabs[old].tabIndex = -1
+ }
+ panels[current].classList.add(...this.currentClasses)
+ tabs[current].tabIndex = 0
+ tabs[current].focus()
+ }
+}
diff --git a/examples/index.js b/examples/index.js
index baa80321..f40397a5 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -16,3 +16,6 @@ application.register("hello", HelloController)
import SlideshowController from "./controllers/slideshow_controller"
application.register("slideshow", SlideshowController)
+
+import TabsController from "./controllers/tabs_controller"
+application.register("tabs", TabsController)
diff --git a/examples/public/examples.css b/examples/public/examples.css
index 5f74abc0..bc436cce 100644
--- a/examples/public/examples.css
+++ b/examples/public/examples.css
@@ -94,3 +94,13 @@ main {
min-width: 16em;
}
+.tabpanel {
+ border: 1px solid #dedede;
+ display: none;
+ margin-top: .4rem;
+ padding: 0.8rem;
+ font-size: 6rem;
+}
+.tabpanel--current {
+ display: block;
+}
diff --git a/examples/server.js b/examples/server.js
index 85084218..a5573f33 100644
--- a/examples/server.js
+++ b/examples/server.js
@@ -22,6 +22,7 @@ const pages = [
{ path: "/clipboard", title: "Clipboard" },
{ path: "/slideshow", title: "Slideshow" },
{ path: "/content-loader", title: "Content Loader" },
+ { path: "/tabs", title: "Tabs" },
]
app.get("/", (req, res) => {
diff --git a/examples/views/tabs.ejs b/examples/views/tabs.ejs
new file mode 100644
index 00000000..5a1b8254
--- /dev/null
+++ b/examples/views/tabs.ejs
@@ -0,0 +1,42 @@
+<%- include("layout/head") %>
+
+
+
This tabbed interface is operated by focusing on a button and pressing the left and right keys.