Components / Disclosure / Accordion — Carla Design System

Main navigation
Intro
OverviewGetting StartedConfiguration
Design Language
ValuesPrinciplesColorsTypographyIconsIllustrations
Guides
StylingThemingLayout
Components
Core
ClickElIconButtonLabelText
Layout
BoxGridSpacer
Actions
ActionButtonActionLinkFloatingActionButton
Forms
CheckboxCheckboxCardFileInputNumberInputRadioRadioCardRadioGroupSelectInputSliderSmallCardSortingSelectorTextAreaTextInput
Disclosure
AccordionCarouselModalOverlayVisuallyHidden
Data Display
BadgeCardInfoMessageTag
Feedback
LoadingLoadingBar
Media
LogoIconsIllustrations
Components / Disclosure / Accordion
AccordionDark Mode
API ReferenceProp
Type
Default
Description
summary
string | React.ReactNode
children
React.ReactNode
data-test
string
defaultExpanded
boolean
mode
'compact' | 'normal'
normal
onChange
(isExpanded: boolean) => void
onClick
() => void
value
string | React.ReactNode
variant
ResponsiveString
Examples
Dark Mode
Open in Playroom
<Accordion summary="Summary Text">
  <Text>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua.
  </Text>
</Accordion>
Value
Dark Mode
Open in Playroom
<Accordion summary="Summary Text" value="some value">
  <Text>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua.
  </Text>
</Accordion>
Default Expanded
Dark Mode
Open in Playroom
<Accordion summary="Summary Text" value="some value" defaultExpanded>
  <Text>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua.
  </Text>
</Accordion>
onChange
Dark Mode
Open in Playroom
<Accordion
  summary="Summary Text"
  value="some value"
  onChange={(isExpanded) => console.log('Expanded: ', isExpanded)}>
  <Text>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua.
  </Text>
</Accordion>
Compact mode
Dark Mode
Open in Playroom
<Accordion summary="Summary Text" mode="compact">
  <Text>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua.
  </Text>
</Accordion>
Changelog07. Mar 2023Added compact mode
28. Oct 2021Update the colors to match the design
Removed all outer paddings
Added Dark Mode support
Table of Contents
API Reference
Examples
Value
Default Expanded
onChange
Compact mode
Changelog
07. Mar 2023
28. Oct 2021