# Accordion Sections of related content, each collapsed behind its heading. ## Preview ```html title="Accordion"

Before you apply

Check you have your national registration number to hand.

What it costs

The fee is BBD 50, payable when you submit the application.

How long it takes

Most applications are decided within 10 working days.

``` ```tsx import { Accordion, AccordionSection } from '@govtech-bb/react';

Check you have your national registration number to hand.

The fee is BBD 50, payable when you submit the application.

 ; ``` The accordion is built on the browser's own `details` and `summary` elements, so it opens, closes and takes keyboard focus with no JavaScript. Sections animate open where the browser supports it, and open instantly everywhere else. Each section takes its own heading level through `headingLevel`, so the accordion fits your page outline rather than forcing one. The default is `h3`. Two props shape the whole accordion: `variant` for how the group is framed, and `allowsMultipleExpanded` for how many can be open at once. `disabled` works on the accordion or on a single section. There is one size and one row height everywhere; pick the heading level for your page outline, not for its look. ## Usage

When to use

When not to use

## Framing: quiet, divided, boxed and cards By default the accordion is quiet: a stack of pressable rows, each taking a hover fill and its own rounding, with nothing drawn between them. Three `variant` values draw borders instead. Use `divided` for rules between sections, where headings run long and users scan the list rather than aim at it. Use `boxed` for one border around the whole group, where the accordion sits among other bordered blocks and needs to match them. Use `cards` to give each section its own bordered card, where sections are peers a user picks between rather than a list they read down. ```html title="Divided accordion"

Before you apply

Check you have your national registration number to hand.

What it costs

The fee is BBD 50.

``` ```tsx import { Accordion, AccordionSection } from '@govtech-bb/react';

Check you have your national registration number to hand.

The fee is BBD 50.

 ; ``` The boxed and cards frames use the same markup with a different modifier class. ```html title="Cards accordion"

Before you apply

Check you have your national registration number to hand.

What it costs

The fee is BBD 50.

``` ```tsx import { Accordion, AccordionSection } from '@govtech-bb/react';

Check you have your national registration number to hand.

The fee is BBD 50.

 ; ``` ## Icons and hints A section heading can carry a decorative icon before it, and a hint line under it. Use a hint when the heading alone cannot say what is inside; front-load the heading anyway, because the hint is what users skip. Icons are hidden from screen readers, and an SVG drawn in `currentColor` follows the row's hover and open colours. Hints are announced as part of the row. ```html title="Section with an icon and a hint"

What it costs

The fee, and the ways you can pay it

The fee is BBD 50, payable when you submit the application.

``` ```tsx import { Accordion, AccordionSection } from '@govtech-bb/react'; } >

The fee is BBD 50, payable when you submit the application.

 ; ``` ## Sections users cannot open Set `disabled` on the accordion to stop every section opening, or on a single section for one that is not available yet. A disabled section is dimmed, drops out of the tab order and does not respond to a click, and it announces as disabled rather than as a heading users can act on. Prefer explaining why a section is empty to disabling it. A user who cannot open a section learns nothing about what would put content in it. ```html title="Disabled section"

Your documents

Available once your application is submitted.

``` ```tsx import { Accordion, AccordionSection } from '@govtech-bb/react';

Available once your application is submitted.

 ; ``` ## One section at a time Set `allowsMultipleExpanded={false}` and the browser keeps one section open, closing the others as the user moves through them. It does that natively: the wrapper gives every section the same `name`, which is what the plain HTML example below sets by hand. Leaving several sections open is the default, and the safer one for content users may want to compare. ```html title="Exclusive accordion"

Before you apply

Check you have your national registration number to hand.

What it costs

The fee is BBD 50.

``` ```tsx import { Accordion, AccordionSection } from '@govtech-bb/react';

Check you have your national registration number to hand.

The fee is BBD 50.

 ; ``` ## Nesting Accordions nest without any extra wiring: put one inside a section's content and each group manages its own sections, so an exclusive outer group never closes because something opened inside it. Treat two levels as the limit; if you need a third, the page needs restructuring more than the accordion needs depth. ```html title="Nested accordion"

General settings

Language

Pick the language the service is shown in.

``` ```tsx import { Accordion, AccordionSection } from '@govtech-bb/react';

Pick the language the service is shown in.

 ; ``` ## Best practices ### Write headings users can choose between The heading is the only thing a user sees before they open a section, so it has to describe what is inside. Write it in [sentence case](/styles/text-case/) and front-load the words that distinguish one section from the next. ### Keep sections independent A user may open the third section first. Each section should make sense on its own rather than reading as step three of a sequence.