<div data-controller="demo">
<div class="<%= segmented_class %>" role="tablist" aria-label="View">
<% { "Overview" => true, "Activity" => false, "Members" => false }.each do |label, selected| %>
<button type="button" class="<%= segmented_tab_class %>" role="tab" aria-selected="<%= selected %>" data-action="demo#select"><%= label %></button>
<% end %>
</div>
<div class="<%= segmented_class %>" role="group" aria-label="Audience">
<% { "Everyone" => true, "By team" => false, "Custom" => false }.each do |label, selected| %>
<button type="button" class="<%= segmented_tab_class %>" aria-pressed="<%= selected %>" data-action="demo#choose"><%= label %></button>
<% end %>
</div>
</div>
Interaction controller
app/javascript/controllers/demo_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["toast", "toasts"]
press({ currentTarget }) {
currentTarget.setAttribute(
"aria-pressed",
String(currentTarget.getAttribute("aria-pressed") !== "true"),
)
}
select({ currentTarget }) {
for (const tab of currentTarget.closest("[role=tablist]").querySelectorAll("[role=tab]")) {
tab.setAttribute("aria-selected", String(tab === currentTarget))
}
}
choose({ currentTarget }) {
for (const button of currentTarget.closest("[role=group]").querySelectorAll("button")) {
button.setAttribute("aria-pressed", String(button === currentTarget))
}
}
toast() {
this.toastsTarget.append(this.toastTarget.content.cloneNode(true))
}
}