 <Accordion.Root>
  <Accordion.Item value="item-1">
    <Accordion.Header>Is it accessible?</Accordion.Header>
    <Accordion.Content>
      Yes. It adheres to the WAI-ARIA design pattern. Keyboard interactions and
      ARIA attributes have been implemented.
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="item-2">
    <Accordion.Header>Can I customize the styling?</Accordion.Header>
    <Accordion.Content>
      Yes, the component accepts className props that can be used to override
      styles. It also comes with built-in size variants.
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="item-3">
    <Accordion.Header>Is it responsive?</Accordion.Header>
    <Accordion.Content>
      Absolutely! The Accordion component adjusts to different screen sizes and
      can be used in various layouts.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Props

Accordion.Root

`size`

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Accordion.Content

`hiddenUntilFound`

boolean

Accordion.Header

`as`

h1h2h3h4h5h6

Usage

Different Sizes

The Accordion component comes with two size variants.

 <Flex direction="column" gap="4">
  <Accordion.Root size="1">
    <Accordion.Item value="item-1">
      <Accordion.Header>Compact accordion header</Accordion.Header>
      <Accordion.Content>
        This accordion uses the smaller size variant.
      </Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>

  <Accordion.Root size="2">
    <Accordion.Item value="item-1">
      <Accordion.Header>Default accordion header</Accordion.Header>
      <Accordion.Content>
        This accordion uses the default size variant.
      </Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
</Flex>

With Custom Header Levels

You can customize the heading level used in the accordion header.

 <Accordion.Root>
  <Accordion.Item value="item-1">
    <Accordion.Header as="h2">This is an h2 heading</Accordion.Header>
    <Accordion.Content>
      Using the appropriate heading level is important for accessibility and
      document structure.
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="item-2">
    <Accordion.Header as="h4">This is an h4 heading</Accordion.Header>
    <Accordion.Content>
      You can choose the heading level that makes the most sense for your page
      structure.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Variants

Dashboard

2 variants found

Accordion in Graphql Error Handlerdashboard

Context

Accordion.Root

Prop	Type	Default	Required
`size`	`"1" \| "2"`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

Accordion.Content

Prop	Type	Default	Required
`hiddenUntilFound`	`boolean`	—	no

Accordion.Header

Prop	Type	Default	Required
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	—	no

Usage

Used 24 times across 2 packages

Dashboard

Admin Portal

Where it's used

5 files

packages/dashboard/src/components/connections/connection-sessions/session-errors.tsx7

packages/dashboard/src/components/graphql-error-handler.tsx7

/p/:portalSessionId/sso/:connectionId/verification/failed/:sessionId

packages/admin-portal/src/app/p/[portalSessionId]/sso/[connectionId]/verification/failed/[sessionId]/session-error-callout.tsx4

/p/:portalSessionId/directory-sync/role-assignment

packages/admin-portal/src/app/p/[portalSessionId]/directory-sync/role-assignment/index.tsx3

/p/:portalSessionId/sso/components/role-assignment

packages/admin-portal/src/app/p/[portalSessionId]/sso/components/role-assignment/form.tsx3

Accordion

On this page

Props

Accordion.Root

`size`

Accordion.Content

`hiddenUntilFound`

Accordion.Header

`as`

Usage

Different Sizes

With Custom Header Levels

Variants

Dashboard

Context

Full API Reference

Accordion.Root

Accordion.Content

Accordion.Header

Usage Statistics

Usage

Where it's used