Tab bar rails

tabs.css

.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
}

.tabs__list {
  background-color: var(--color-border-light);
  block-size: var(--size-10);
  border-radius: var(--rounded-md);
  color: var(--color-text-subtle);
  display: inline-flex;
  gap: var(--size-2);
  padding: var(--size-1);

  button {
    background-color: transparent;
    color: var(--color-text-subtle);
    inline-size: var(--size-full);
  }

  button[aria-selected=true] {
    background-color: var(--color-bg);
    color: var(--color-text);
  }
}

tabs.html.erb

<div class="tabs" data-controller="tabs" data-tabs-selected-value="tab_account" style="max-inline-size: 400px">
  <div class="tabs__list" role="tablist">
    <%= tab_button "Account",  id: "trigger_account",  value: "tab_account" %>
    <%= tab_button "Password", id: "trigger_password", value: "tab_password" %>
  </div>

  <%= tab_panel "tab_account", labelled_by: "trigger_account" do %>
    <%= render "account_form" %>
  <% end %>

  <%= tab_panel "tab_password", labelled_by: "trigger_password" do %>
    <%= render "password_form" %>
  <% end %>
</div>

tabs_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "button", "tab" ]
  static values  = { selected: String }

  initialize() {
    this.#showSelectedTab()
  }

  select({ target }) {
    this.selectedValue = target.dataset.value
    this.#showSelectedTab()
  }

  #showSelectedTab() {
    this.buttonTargets.forEach(element => {
      element.ariaSelected = element.dataset.value === this.selectedValue
    })

    this.tabTargets.forEach(element => {
      element.hidden = element.id !== this.selectedValue
    })
  }
}

tabs_helper.rb

module TabsHelper
  def tab_button(content = nil, id:, value:, **, &)
    tag.button(content, id:, class: "btn", role: "tab", aria: { controls: value }, data: { tabs_target: "button", action: "tabs#select", value: }, **, &)
  end

  def tab_panel(id, labelled_by:, **, &)
    tag.div(id:, role: "tabpanel", aria: { labelledby: labelled_by }, data: { tabs_target: "tab" }, **, &)
  end
end