Skip to main content
⌘K
Last modified: 24/Jun/2024

Card Accordion Item

The Card.Accordion.Item is the children item for the Accordion component.

#Usage

import { Card } from '@kinsta/stratus'

const myComponent = () => (
  <Card header="Empire Strikes Back">
    <Card.Accordion defaultKeys={[1]}>
      <Card.Accordion.Item position={1} header="Boba Fett">
        Luke, when gone am I, the last of the Jedi will you be. Luke, the Force
        runs strong in your family. Pass on what you have learned, Luke. There
        is...another...Sky...Sky...walker.
      </Card.Accordion.Item>
      <Card.Accordion.Item position={2} header="Cad Bane">
        The Emperor has been expecting you. I know, father. So, you have
        accepted the truth. I've accepted the truth that you were once Anakin
        Skywalker, my father. That name no longer has any meaning for me.
      </Card.Accordion.Item>
    </Card.Accordion>
  </Card>
)

#Card.Accordion.Item Props

#position
Required
number
The id of the Item. Its value is related with the values defined in the defaultKeys prop
Required
string | ReactElement<any, string | JSXElementConstructor<any>>
The title of the AccordionItem
#isCollapsible
boolean
true" description="Decides whether the item can collapse or not
true
#isLoading
boolean
If true, all items' content within the accordion will show as loading
false
#onStateChange
(isOpen: boolean) => void
The callback that runs when the state is changing
#headerRightSlot
string | ReactElement<any, string | JSXElementConstructor<any>>
Placeholder to place content next to the title. Note that if you add a button to this prop don't forget to stop the event propagation in order to prevent the Accordion from opening/closing.

#Types

  • AccordionItemProps: props of the Accordion.Item subcomponent processed by stratus

Read more about types here

#See also