Accordion

Basic Accordion

The <Accordion> component provides a group of collapsible content, where only one panel is open at a time by default. Styling based on the .bf-accordion CSS class.

<Accordion>
  <Accordion.Item title="Thor about Loki">
    [expandable content...]
  </Accordion.Item>
  [more items...]
</Accordion>

Styled variant

<Accordion variant="styled">

With icon

<Accordion.Item icon={faQuoteRight} ... />

Styled variant:

Compact (or responsive) mode

Both default and 'styled' variant supports mode='compact' which removes left/right border and the border radius, suitable for when the accordion itself should be full width inside a small container (like a modal, drawer or in a column layout).

The 'responsive' mode behaves like 'compact' but is only applied for mobile (smaller than 600px width) screens.

<Accordion mode='compact'>

Compact for styled variant

<Accordion mode='compact' variant='styled'>

No padding

You can remove the padding inside content panels with <Accordion.Item noPadding>, useful when you have content that stretches the full width.

<Accordion.Item noPadding>

Secondary actions

By default, the entire title area of an <Accordion.Item> is clickable and will toggle its expanded state. If you need another action, you can pass <Accordion.Action> element(s) to the actions prop, which will be placed to the right of the clickable title area.

Clicks on the actions area will not toggle the expanded state of the accordion.

<Accordion.Action> is basically just a <button> styled for use in the accordion. The aria-label allows us to supply a screen-reader accessible label for buttons without text content.

<Accordion.Item
  title="Accordion.Action icon button"
  actions={
    <Accordion.Action
      icon={faPencil}
      onClick={() => console.log("Edit ation clicked")}
      aria-label="Edit"
    />
  }
>

Styled variant:

Multiple active items

Passing multiple to the <Accordion> allows multiple items to be open at the same time.

<Accordion multiple>

Radius

The radius prop allows customizing the border-radius size, useful when nesting multiple elements with rounded corners, or removing them when full-width inside a container. Valid values are:

• "none" = no border radius
• "xs" = 4px
• "s" = 8px
• "m" (or undefined) = 12px (default)
• "l" = 16px
• "xl" = 24px

<Accordion radius="s">

Radius for styled variant

For default <Accordion>, it changes the outermost border-radius as shown above, but for variant="styled" it sets border-radius for each <Accordion.Item> child instead.

<Accordion radius="s" variant="styled">