Accordion

The Accordion component groups related content into expandable sections.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁵⁾

Properties

⁽³⁶⁾

Playground

Single Expansion

Allow only one item to open at a time by setting type="single" and passing an items array.

Loading demo…

import
 
{
 
Accordion
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 faqItems 
}
 
from
 
'../data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
<Accordion
 
type
=
"single"
 
items
=
{
faqItems
}
 
/>
;
}

Multiple Expansion

Control the expanded keys to keep several accordion items open at the same time.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Accordion
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 knowledgeBase 
}
 
from
 
'../data'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
expandedKeys
,
 setExpandedKeys
]
 
=
 useState
<
string
[
]
>
(
[
'collaboration'
]
)
;
 
  
return
 
(
    
<Accordion
      
type
=
"multiple"
      
expanded
=
{
expandedKeys
}
      
onExpandedChange
=
{
setExpandedKeys
}
      
items
=
{
knowledgeBase
}
    
/>
  
)
;
}

Visual Variants

Switch between default, separated, and bordered variants to adjust emphasis.

Loading demo…

import
 
{
 
Accordion
,
 
Block
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 onboardingSteps 
}
 
from
 
'../data'
;
 
const
 variants 
=
 
[
'default'
,
 
'separated'
,
 
'bordered'
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
{
variants
.
map
(
(
variant
)
 
=>
 
(
        
<Block
 
key
=
{
variant
}
>
          
<Text
 
size
=
"xs"
 
weight
=
"600"
 
color
=
"muted"
 uppercase 
tracking
=
{
1
}
>
            
{
variant
}
          
</Text
>
          
<Accordion
 
type
=
"single"
 
variant
=
{
variant
}
 
items
=
{
onboardingSteps
}
 
/>
        
</Block
>
      
)
)
}
    
</Block
>
  
)
;
}

Accent Colors

Accent each expanded panel with a theme palette — primary, secondary, tertiary, success, warning, error, or gray. Set color on the accordion for a uniform accent, or per item to mix accents in a single accordion. Collapsed items stay neutral so only the open panel is highlighted.

Loading demo…

import
 
{
 
Accordion
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 statusItems 
}
 
from
 
'../data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Accordion
      
type
=
"multiple"
      
variant
=
"separated"
      
defaultExpanded
=
{
[
'healthy'
]
}
      
items
=
{
statusItems
}
    
/>
  
)
;
}

Title customization

titleProps accepts any <Text> props (ff, weight, tracking, uppercase, size, color, style) and applies them to every item header in the accordion. The existing headerTextStyle escape hatch still works and can be combined.

Loading demo…

import
 
{
 
Accordion
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
{
 setupSteps 
}
 
from
 
'../data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Accordion
      
items
=
{
setupSteps
}
      
titleProps
=
{
{
 uppercase
:
 
true
,
 tracking
:
 
1
,
 weight
:
 
'700'
,
 size
:
 
'sm'
 
}
}
    
/>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Accordion

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap