Accordion

Keyed disclosure sections with native buttons and visible state.

Source: app/components/nitro_kit/accordion.rb
API: NitroKit::Accordion.new(id:, mode:) { |accordion| accordion.item }

Anatomy

Native details and summary elements work without JavaScript; single mode uses browser-native named grouping and keeps stable keyed IDs.

Billing questions

Where can I find invoices?

Invoices are available from Billing settings.

Can I change billing currency?

Contact support before the next renewal date.

What happens to a legacy plan?

Legacy plans retain their current limits until an owner chooses a new plan.

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/accordion_page.rb

render NitroKit::Accordion.new(id: "gallery-accordion-billing", mode: :single) do |accordion|
  accordion.item(:invoices, title: "Where can I find invoices?", expanded: true) do
    "Invoices are available from Billing settings."
  end
  accordion.item(:currency, title: "Can I change billing currency?") do
    "Contact support before the next renewal date."
  end
  accordion.item(:legacy, title: "What happens to a legacy plan?") do
    "Legacy plans retain their current limits until an owner chooses a new plan."
  end
end

Modes and item counts

Single and multiple expansion modes remain useful from one disclosure through a dense set.

Boundary counts

One closed item

Workspace summary

Mothership is on the Team plan with twelve active members.

One open item

Workspace summary

Mothership is on the Team plan with twelve active members.

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/accordion_page.rb

sample("One closed item", slug: "one-closed") do
  render NitroKit::Accordion.new(id: "gallery-accordion-one", mode: :multiple) do |accordion|
    accordion.item(:summary, title: "Workspace summary") do
      "Mothership is on the Team plan with twelve active members."
    end
  end
end

sample("One open item", slug: "one-open") do
  render NitroKit::Accordion.new(id: "gallery-accordion-one-open", mode: :single) do |accordion|
    accordion.item(:summary, title: "Workspace summary", expanded: true) do
      "Mothership is on the Team plan with twelve active members."
    end
  end
end

Multiple open items

General

Workspace name, locale, and time zone.

Members and access

Roles, pending invitations, and session policies.

Billing

Plan, payment method, and invoice history.

Advanced controls

Advanced controls are managed by the organization owner.

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/accordion_page.rb

render NitroKit::Accordion.new(id: "gallery-accordion-multiple", mode: :multiple) do |accordion|
  accordion.item(:general, title: "General", expanded: true) do
    "Workspace name, locale, and time zone."
  end
  accordion.item(:members, title: "Members and access", expanded: true) do
    "Roles, pending invitations, and session policies."
  end
  accordion.item(:billing, title: "Billing") do
    "Plan, payment method, and invoice history."
  end
  accordion.item(:advanced, title: "Advanced controls") do
    "Advanced controls are managed by the organization owner."
  end
end

Content pressure

Long labels, long copy, nested markup, and many items use the same keyed declaration API.

Long and nested content

How does workspace data retention change when a long-running organization changes plans?

Workspace records remain available throughout the current billing period. Exported audit events continue to use their original timestamps and actor identifiers.

Active members keep their existing access until the renewal date.
Pending invitations can be revoked before the plan changes.
Invoice and audit exports remain available to workspace owners.

Exports

Exports are prepared as UTF-8 CSV files.

Data regions

The workspace currently uses the EU region.

Active sessions

Owners can revoke individual sessions.

Webhook delivery

Failed deliveries retry with backoff.

Legacy retention controls

Legacy controls remain visible while owners plan their replacement.

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/accordion_page.rb

render NitroKit::Accordion.new(id: "gallery-accordion-pressure", mode: :multiple) do |accordion|
  accordion.item(
    :retention,
    title: "How does workspace data retention change when a long-running organization changes plans?",
    expanded: true
  ) do
    p do
      "Workspace records remain available throughout the current billing period. Exported audit events " \
        "continue to use their original timestamps and actor identifiers."
    end
    ul do
      li { "Active members keep their existing access until the renewal date." }
      li { "Pending invitations can be revoked before the plan changes." }
      li { "Invoice and audit exports remain available to workspace owners." }
    end
  end
  accordion.item(:exports, title: "Exports") { "Exports are prepared as UTF-8 CSV files." }
  accordion.item(:regions, title: "Data regions") { "The workspace currently uses the EU region." }
  accordion.item(:sessions, title: "Active sessions") { "Owners can revoke individual sessions." }
  accordion.item(:webhooks, title: "Webhook delivery") { "Failed deliveries retry with backoff." }
  accordion.item(:legacy, title: "Legacy retention controls") do
    "Legacy controls remain visible while owners plan their replacement."
  end
end

Detail composition

An operational detail view composes cards, status, tables, and grouped actions inside panels.

Deployment detail

Deployment overview

Billing portal · release 1842

Deployed by Grace Hopper on July 13, 2026 at 08:42 UTC.

Operational

Health checks

Deployment health checks
Check	Result
Application boot	Passed
Database connection	Passed
Queue latency	42 ms

Environment and access

Production environment

EU region · protected branch · owner approval required

Protected

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/accordion_page.rb

render NitroKit::Accordion.new(id: "gallery-accordion-deployment", mode: :single) do |accordion|
  accordion.item(:overview, title: "Deployment overview", expanded: true) do
    render NitroKit::Card.new(id: "gallery-accordion-deployment-card") do |card|
      card.header do
        card.title("Billing portal · release 1842", level: 3)
        card.description("Deployed by Grace Hopper on July 13, 2026 at 08:42 UTC.")
        card.actions do
          render NitroKit::Badge.new(
            "Operational",
            id: "gallery-accordion-deployment-status",
            color: :success,
            size: :sm
          )
        end
      end
      card.divider
      card.footer do
        card.actions do
          render NitroKit::ButtonGroup.new(
            id: "gallery-accordion-deployment-actions",
            label: "Deployment actions"
          ) do |group|
            group.button(
              "View logs",
              id: "gallery-accordion-deployment-logs",
              href: "#deployment-logs",
              size: :sm
            )
            group.button(
              "Roll back",
              id: "gallery-accordion-deployment-rollback",
              variant: :destructive,
              size: :sm
            )
          end
        end
      end
    end
  end

  accordion.item(:checks, title: "Health checks") do
    render_health_checks
  end

  accordion.item(:environment, title: "Environment and access") do
    render NitroKit::Card.new(id: "gallery-accordion-environment-card") do |card|
      card.header do
        card.title("Production environment", level: 3)
        card.description("EU region · protected branch · owner approval required")
        card.actions do
          render NitroKit::Badge.new(
            "Protected",
            id: "gallery-accordion-environment-status",
            variant: :outline,
            color: :info
          )
        end
      end
    end
  end
end

Under pressure

Two dozen items titled with every Gallery::Hostile tab label, unbroken, RTL, CJK, and emoji, two of them expanded over four paragraphs and a webhook URL; then a hostile roster table inside a single-mode panel.

Hostile items

General

This description keeps going well past the point where a sensible product would have stopped, because real customers paste release notes, legal disclaimers, and entire support tickets into fields that were designed for a single line of text. This description keeps going well past the point where a sensible product would have stopped, because real customers paste release notes, legal disclaimers, and entire support tickets into fields that were designed for a single line of text. This description keeps going well past the point where a sensible product would have stopped, because real customers paste release notes, legal disclaimers, and entire support tickets into fields that were designed for a single line of text. This description keeps going well past the point where a sensible product would have stopped, because real customers paste release notes, legal disclaimers, and entire support tickets into fields that were designed for a single line of text.

https://enterprise-holdings-international.example/workspaces/analytical-engines-research-and-production/settings/integrations/webhooks/deliveries/whd_01J8ZK3Q9W7RX2M5N6P8T4V1Y0/attempts/3?include=headers,body,response&expand=endpoint.owner

Regional data residency, retention, and lawful-basis preferences for every workspace

Members

Security & compliance

Wolfeschlegelsteinhausenbergerdorffwelchevoralternwarengewissenhaftschaferswessenschafewarenwohlgepflege

Billing

Integrations

Webhooks

API credentials

Audit log

Data residency

Single sign-on

SCIM provisioning

Domains

Branding

Notifications

Import & export

Legal

Danger zone

山田太郎（プラットフォームエンジニアリング）

محمد عبد الرحمن الهاشمي القحطاني

🦄 Unicorn Ops 🚀🔥💯 On-call

Legacy

Experimental

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/accordion_page.rb

render NitroKit::Accordion.new(id: "gallery-accordion-hostile", mode: :multiple) do |accordion|
  Gallery::Hostile::TAB_LABELS.each_with_index do |label, index|
    accordion.item(:"setting_#{index}", title: label, expanded: [ 1, 4 ].include?(index)) do
      p { Gallery::Hostile::LONG_PARAGRAPH }
      p { a(href: Gallery::Hostile::LONG_URL) { Gallery::Hostile::LONG_URL } }
    end
  end
end

Hostile roster in a panel

Regional data residency, retention, and lawful-basis preferences for every workspace

Hostile roster
Member	Email	Balance
Dr. Maximiliana Wolfeschlegelsteinhausenbergerdorff-Featherstonehaugh von Hohenzollern-Sigmaringen III	maximiliana.wolfeschlegelsteinhausenbergerdorff+billing.notifications.eu-west-2026@finance.department.enterprise-holdings-international.example	$9,999,999,999,999.99
Wolfeschlegelsteinhausenbergerdorffwelchevoralternwarengewissenhaftschaferswessenschafewarenwohlgepflege	ünïcödé.tëst+ß@exämple-bücher.test	−$1,234,567.89
محمد عبد الرحمن الهاشمي القحطاني	用户@例子.广告	$9,999,999,999,999.99
山田太郎（プラットフォームエンジニアリング）	[email protected]	−$1,234,567.89
สวัสดีครับยินดีต้อนรับสู่ระบบจัดการทีมงานของเรา	wolfeschlegelsteinhausenbergerdorffwelchevoralternwarengewissenhaftschaferswessenschafewarenwohlgepflege@wolfeschlegelsteinhausenbergerdorffwelchevoralternwarengewissenhaftschaferswessenschafewarenwohlgepflege.example	$9,999,999,999,999.99
🦄 Unicorn Ops 🚀🔥💯 On-call	maximiliana.wolfeschlegelsteinhausenbergerdorff+billing.notifications.eu-west-2026@finance.department.enterprise-holdings-international.example	−$1,234,567.89
Zerowidth‍joined⁠namehere	ünïcödé.tëst+ß@exämple-bücher.test	$9,999,999,999,999.99
Ạ̈ḅ̈c̣̈ D̷̢i̶a̸c̵r̷i̶t̸i̵c̷s̶	用户@例子.广告	−$1,234,567.89
X	[email protected]	$9,999,999,999,999.99

Wolfeschlegelsteinhausenbergerdorffwelchevoralternwarengewissenhaftschaferswessenschafewarenwohlgepflege

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/accordion_page.rb

render NitroKit::Accordion.new(id: "gallery-accordion-hostile-panel", mode: :single) do |accordion|
  accordion.item(:roster, title: Gallery::Hostile::LONG_LABEL, expanded: true) do
    render NitroKit::Table.new(id: "gallery-accordion-hostile-roster") do |table|
      table.caption("Hostile roster")
      table.thead do
        table.tr do
          table.th("Member")
          table.th("Email")
          table.th("Balance", align: :right)
        end
      end
      table.tbody do
        Gallery::Hostile.members(9).each_with_index do |member, index|
          table.tr do
            table.th(member.name, scope: :row)
            table.td(member.email)
            table.td(index.even? ? Gallery::Hostile::HUGE_MONEY : Gallery::Hostile::NEGATIVE_MONEY, align: :right)
          end
        end
      end
    end
  end
  accordion.item(:policy, title: Gallery::Hostile::LONG_WORD) { Gallery::Hostile::LONG_SENTENCE }
end

Component contract

Constructor options, rendered root, closed vocabularies, and compound boundary for this component, exactly as shipped.

docs/component_contracts.md · NitroKit::Accordion

Constructor-specific options: required id:
mode: :multiple
Root and closed vocabulary: div[data-nk=accordion]; modes multiple single
Compound contract: Requires one or more uniquely keyed item(key, title:, expanded: false) declarations. Each item renders native details and summary, so find-in-page and fragment navigation reveal matching closed content without a controller. Single mode gives every disclosure the same name and accepts at most one initially expanded item; multiple mode omits name. There is no disabled item or controller.

System rules for coding agents

Instructions for coding agents, repeated on every component page so one fetched page has enough context. Humans can usually skip this section.

test/dummy/app/components/gallery/agent_rules.rb

View agent instructions

Nitro Kit 2.0 is a gem-owned, Phlex-only UI system for Rails. Render components directly: render NitroKit::Button.new("Save", variant: :primary).
Compose Nitro components inside application-owned Phlex classes. Public initializers and declared slots are the component API; private methods are not.
Public options are explicit keywords, and enumerated options are closed vocabularies. Invalid names or values raise ArgumentError; this component's accepted options are in the contract above.
Pass native attributes through their typed boundary: html: for HTML, aria: for ARIA, and data: for application data. class and style are forbidden, including inside html:.
Nitro owns NitroKit::Component::RESERVED_DATA_ATTRIBUTES: data-nk, data-slot, data-variant, data-size, data-nk-escape, data-enhanced, data-state, data-disabled, data-required, data-orientation, data-presentation, data-placement, data-layout, data-side, data-field-type, data-dir, data-gap, data-align, data-justify, data-wrap, data-cols, data-mode, data-key. Do not pass them through data:. data-action, data-controller are additive and compose with Nitro behavior.
If an integration truly requires a class, use desperately_need_a_class:. It requires a non-blank String and marks the exception with data-nk-escape="class".
Every root emits data-nk; owned parts emit component-qualified data-slot values such as field-control or card-title. Select on those attributes, never on classes.
Customize components with documented --nk-* custom properties in an application stylesheet. Variables beginning with --_nk-* are private component mechanics.
Use NitroKit::Flex and NitroKit::Grid for layout. Parents own external placement and available width; components own their intrinsic geometry.
Preserve native elements and accessibility semantics. State is exposed through native semantics and ARIA first, and through data-state when styling or behavior also needs it.