Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Accordion

    A stack of headers that each open and close a section of content.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { Accordion } from '@bigbang/ui';
    Source
    Accordion.tsx
    Storybook
    Accordion · Playground

    Accordion has two parts, both in the @bigbang/ui package: Accordion, AccordionItem.

    import { Accordion, AccordionItem } from '@bigbang/ui';
    

    <Accordion defaultValue={["first"]} multiple>
      <AccordionItem value="first" title="First heading" description="Short description text">
        …
      </AccordionItem>
      <AccordionItem value="second" title="Second heading" icon="info">
        …
      </AccordionItem>
    </Accordion>;

    Props

    Section titled “Props”

    Accordion

    Section titled “Accordion”
    value
    Description
    Values of the open items when you control them. Use it with onValueChange.
    Type
    string[]
    defaultValue
    Description
    Values of the items open on first render when you do not control them.
    Type
    string[]
    Default
    []
    onValueChange
    Description
    Called with the values of the open items after each change.
    Type
    (value: string[]) => void
    multiple
    Description
    Lets more than one item stay open. Without it opening an item closes the others.
    Type
    boolean
    Default
    false
    variant
    Description
    line separates items with rules, keeps the header text flush with the content around it and suits page content; contained puts each item in a bordered box.
    Type
    'line' | 'contained'
    Default
    'line'
    size
    Description
    Header height of 36 or 40 px and the matching text size.
    Type
    'sm' | 'md'
    Default
    'sm'
    headingLevel
    Description
    Heading level of each item header, so the outline of the page stays correct.
    Type
    2 | 3 | 4 | 5 | 6
    Default
    3
    hiddenUntilFound
    Description
    Keeps closed content findable with the browser's find in page (hidden="until-found"); a match opens its item.
    Type
    boolean
    Default
    true
    disabled
    Description
    Turns off every item.
    Type
    boolean
    Default
    false
    className
    Description
    For layout only: margins and placement.
    Type
    string
    childrenRequired
    Description
    AccordionItem components.
    Type
    ReactNode

    AccordionItem

    Section titled “AccordionItem”
    valueRequired
    Description
    Value that identifies the item in value and defaultValue.
    Type
    string
    titleRequired
    Description
    Header text. It names the button that opens the item.
    Type
    string
    description
    Description
    Short secondary line under the title. Screen readers read it as part of the button's name, after the title.
    Type
    string
    icon
    Description
    Registered icon name before the title. Decorative.
    Type
    IconName
    disabled
    Description
    Turns off this item.
    Type
    boolean
    Default
    false
    className
    Description
    For layout only.
    Type
    string
    childrenRequired
    Description
    Content shown while the item is open.
    Type
    ReactNode

    Data attributes

    Section titled “Data attributes”
    • data-component: accordion, accordion-item, accordion-trigger, accordion-panel.
    • data-variant on the root.
    • data-open on an open item and panel, data-disabled on a disabled item (Base UI).