Skip to main content

Accordion

A vertically stacked list of headers that reveal or hide associated sections of content.

github
View source code
figma
View design
import { Accordion } from '@uhg-abyss/mobile';
      () => {
        return (
          <Accordion>
            <Accordion.Item value="sandbox-1" label="Sandbox Accordion 1">
              SURPRISE - Sandbox Accordion 1
            </Accordion.Item>
      

            <Accordion.Item value="sandbox-2" label="Sandbox Accordion 2">
              SURPRISE - Sandbox Accordion 2
            </Accordion.Item>
      

            <Accordion.Item value="sandbox-3" label="Sandbox Accordion 3">
              SURPRISE - Sandbox Accordion 3
            </Accordion.Item>
          </Accordion>
        );
      };

      Type Multiple​

      Use the type property to set the Accordion to either have single or multiple open items. The default is set to single.

      Default Value - Single​

      Use the defaultValue property to set an initial Accordion to be open based on its value property. When type is set to single pass in a string.

      Default Value - Multiple​

      When the type of the Accordion is set to multiple pass in a string array.

      Collapsible​

      The isCollapsible property allows closing content when clicking the trigger for an open item. When true you are allowed to collapse all items. When false one item will always remain open. The default is set to true. Collapsible does not apply when the type is "multiple".

      Disabled​

      Use the isDisabled property to disable the entire Accordion or individual levels. The default is set to false.

      Border Variants​

      Accordion borders can be manipulated using the below props:

      hideBorderTop | hides the border at the top of the accordion.

      hideBorderBottom | hides the border at the bottom of the accordion.

      hideBorderAll | hides all borders in the accordion.

      onValueChange​

      The onValueChange property is an event handler that is called when the expanded state of any item changes.

      onTrigger​

      The onTrigger property on Accordion.Item is an event handler that is called when the expanded state of that item changes and provides the item value and interaction state (expanding or collapsing).

      Accordion Props​

      NameTypeDefaultRequiredDescription
      children
      React.ReactNode | undefined
      		--
      The Accordion items to be displayed
      defaultValue
      string | string[] | undefined
      		--
      Default value(s) of the accordion item. Can be a string or an array of strings
      hideBorderAll
      boolean | undefined
      false
      		-
      Hides the borders of the Accordion
      hideBorderBottom
      boolean | undefined
      false
      		-
      Hides the border at the bottom of the Accordion
      hideBorderTop
      boolean | undefined
      false
      		-
      Hides the border at the top of the Accordion
      isCollapsible
      boolean | undefined
      false
      		-
      Used to enable/disable the ability to collapse all Accordion items
      isDisabled
      boolean | undefined
      false
      		-
      Disables the Accordion so that none of the Accordion items can be opened
      onValueChange
      (value: string | string[]) => void | undefined
      		--
      Event handler called when the expanded state of an item changes
      type
      'single' | 'multiple' | undefined
      'single'
      		-
      Used to enable/disable the ability to collapse all Accordion items

      Accordion.Item Props​

      NameTypeDefaultRequiredDescription
      children
      React.ReactNode | undefined
      		--
      The Text to be displayed on an expanded Accordion item
      hideBorderAll
      boolean | undefined
      false
      		-
      Hides the borders of the current accordion item
      hideBorderBottom
      boolean | undefined
      false
      		-
      Hides the border at the bottom of the current accordion item
      hideBorderTop
      boolean | undefined
      false
      		-
      Hides the border at the top of the current accordion item
      isDisabled
      boolean | undefined
      false
      		-
      Disables the individual Accordion Item so that it can't be opened
      label
      React.ReactNode
      		-
      Sets the label of the Accordion item
      onTrigger
      (params: { value: string; state: 'expanding' | 'collapsing'; }) => void | undefined
      		--
      Callback function triggered when the accordion item is expanded or collapsed
      Provides the item value and interaction state as arguments
      value
      string
      		-
      Used to set the value of the Accordion item

      Accordion Classes​

      Class NameDescription
      abyss-accordion-rootAccordion root element

      Accordion.Item Classes​

      Class NameDescription
      abyss-accordion-item-rootAccordion item root element
      abyss-accordion-labelAccordion label element
      abyss-accordion-triggerAccordion trigger element
      abyss-accordion-trigger-iconAccordion trigger icon element
      abyss-accordion-contentAccordion content element
      abyss-accordion-textAccordion content text element

      Accordion Tokens​

      Token NameValue
      accordion.color.surface.container
      #FFFFFF
      accordion.color.border.container
      #CBCCCD
      accordion.color.icon.utility.rest
      #4B4D4F
      accordion.color.icon.utility.disabled
      #929496
      accordion.color.text.heading.rest
      #4B4D4F
      accordion.color.text.heading.disabled
      #929496
      accordion.color.text.paragraph
      #4B4D4F
      accordion.border-width.vertical.container
      0.5
      accordion.sizing.all.icon.utility
      24
      accordion.spacing.padding.horizontal.header
      16
      accordion.spacing.padding.horizontal.content
      16
      accordion.spacing.padding.vertical.header
      24
      accordion.spacing.padding.bottom.content
      16
      accordion.spacing.gap.horizontal.header
      16
      accordion.spacing.gap.vertical.content
      16
      Table of Contents