Grapes homepage1.57.0
  • Guide
  • Tokens
  • Components
    Grapes on GithubGrapes on Figma
    Interaction
    • Button
    • IconButton
    • FloatingActionBar
    • Link
    Icons
    • Icon
    • HighlightIcon
    Form
    • AmountInput
    • Autocomplete
    • AutocompleteMultiple
    • AutocompletePlace
    • CheckboxBox
    • CheckboxField
    • DatePicker
    • FormField
    • Input
    • OptionGroup
    • PasswordInput
    • PhoneInput
    • RadioBox
    • RadioField
    • RadioGroup
    • Select
    • SwitchField
    • TextArea
    • TextInput
    • Upload
    • UploadButton
    Feedback
    • Badge
    • Banner
    • Callout
    • EmptyState
    • Modal
    • ModalSlideshow
    • DeprecatedModalSlideshow
    • PageModal
    • Skeleton
    • Tag
    • Toast
    • Tooltip
    Data display
    • Accordion
    • Avatar
    • Box
    • Calendar
    • CalendarRange
    • CollapsibleList
    • FileCard
    • InfoTip
    • ListBox
    • ListView
    • Panel
    • SidePanel
    • DeprecatedPreview
    • Table
    • Timeline
    • useDateFormatter
    Navigation
    • DropdownItem
    • DropdownMenu
    • Navigation
    • NavigationItem
    • Popover
    • Tabs

    CollapsibleList

    View source code
    • Usage
    • Props

    CollapsibleList

    • children
      ReactNode

      The content of the CollapsibleList, should be CollapsibleListItem(s).

    • renderHeader
      (toggle: () => void, isCollapsed: boolean) => ReactNode

      Function to render the header of the CollapsibleList.

    • className
      string

      className for the element.

    • footer
      ReactNode

      Footer of the CollapsibleList.

    • isInitialCollapsed
      boolean

      Whether the CollapsibleList should be collapsed by default.

      Default: true
    • noAnimation
      boolean

      Whether the CollapsibleList should have opening and closing animation. Has no effect when prefers-reduced-motion is set

      Default: false

    CollapsibleListItem

    • children
      ReactNode

      The content of the CollapsibleListItem.

    • onClick
      MouseEventHandler

      Handler that is called when the CollapsibleListItem is clicked.

    • asHeader
      boolean

      Whether this element is the header of a CollapsibleList.

      Default: false
    • className
      string

      className for the element.

    • isActive
      boolean

      Whether this element is active.

      Default: false
    • isCollapsed
      boolean

      Whether the CollapsibleList is collapsed.

      Default: true
    • isIndeterminate
      boolean

      Whether the CollapsibleListItem is indeterminate (only active if the asHeader prop is set to true).

    • isSelected
      boolean

      Whether the CollapsibleListItem is selected.

    • onSelect
      ChangeEventHandler<HTMLInputElement>

      Handler that is called when a CollapsibleListItem has been selected.

    • rightAddon
      ReactNode

      Right addon of the CollapsibleListItem.

    • variant
      "alert"

      The visual style of the CollapsibleListItem.