Accordion

The Accordion allows content to be hidden or displayed by clicking a trigger. Multiple items can be shown simultaneously, or restricted to a single item using the type prop.

Usage

import { Accordion } from '@harnessio/ui/components'

//...

return (
  <Accordion.Root type="multiple" defaultValue={["item1"]} size="md">
    <Accordion.Item value="item1">
      <Accordion.Trigger>Item 1</Accordion.Trigger>
      <Accordion.Content>
        <p>This is the content of item 1</p>
      </Accordion.Content>
    </Accordion.Item>

    <Accordion.Item value="item2">
      <Accordion.Trigger>
        <Accordion.TriggerLogo name="docker" />
        Item 2
      </Accordion.Trigger>
      <Accordion.Content>
        <p>This is the content of item 2</p>
      </Accordion.Content>
    </Accordion.Item>

    <Accordion.Item value="item3">
      <Accordion.Trigger>
        <Accordion.TriggerIcon name="info-circle" />
        Item 3
      </Accordion.Trigger>
      <Accordion.Content>
        <p>This is the content of item 3</p>
      </Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
)

Anatomy

All parts of the Accordion component can be imported and composed as required.

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Trigger>
      <Accordion.TriggerIcon />
      <Accordion.TriggerLogo />
    </Accordion.Trigger>
    <Accordion.Content />
  </Accordion.Item>
</Accordion.Root>

API Reference

Root

The Accordion.Root component wraps and controls the Accordion.Items. The type prop controls whether the accordion allows the display of multiple items or a single item. The accordion can be either controlled or uncontrolled. By default, the accordion is uncontrolled and will manage its own internal state. When the value and onValueChange props are supplied, the accordion becomes controlled and state is handled externally.

Prop	Required	Default	Type
type	true	single	'single' | 'multiple'
collapsible	false	false	boolean
defaultValue	false		string | string[]
disabled	false	false	boolean
onValueChange	false		(newValue: string | string[]) => void
value	false		string | string[]
size	false	default	'default' | 'md'
indicatorPosition	false	right	'left' | 'right'

Item

The Accordion.Item component represents an individual collapsible panel consisting of a trigger and content to display. The value prop is required and can be thought of as the identifier of the individual Accordion.Item.

Prop	Required	Default	Type
value	true		string
asChild	false	false	boolean
disabled	false	false	boolean

Trigger

The Accordion.Trigger component displays the item with a chevron disclosure icon.

Prop	Required	Default	Type
children	true		ReactNode
asChild	false	false	boolean
suffix	false		string

TriggerIcon

The Accordion.TriggerIcon component displays an icon within the trigger

Prop	Required	Default	Type
name	true		string

TriggerLogo

The Accordion.TriggerLogo component displays a logo within the trigger

Prop	Required	Default	Type
name	true		string

Content

The Accordion.Content component displays the item contents when triggered using the Accordion.Trigger.

Prop	Required	Default	Type
children	true		ReactNode
asChild	false	false	boolean