Accordion

A set of collapsible panels with headings.

What is OntoUI?

How do I get started?

Is it accessible?

import { Accordion } from '@ontoui/react';

<Accordion.Root>
  <Accordion.Item value="item1">
    <Accordion.Header>
      <Accordion.Trigger>What is OntoUI?</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>
      <Accordion.PanelContent>OntoUI is a React component library.</Accordion.PanelContent>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>;

Anatomy

Part	Element	Description
Accordion.Root	<div>	Groups all accordion items.
Accordion.Item	<div>	Groups a header with its corresponding panel.
Accordion.Header	<h3>	A heading that labels the corresponding panel.
Accordion.Trigger	<button>	A button that opens and closes the corresponding panel.
Accordion.Panel	<div>	A collapsible panel with the accordion item contents.
Accordion.PanelContent	<div>	Padded wrapper for the panel contents.

Examples

Multiple panels open

Set multiple on Accordion.Root to allow several panels to be open simultaneously.

Section A

Section B

Section C

<Accordion.Root multiple>
  <Accordion.Item value="item1">
    <Accordion.Header>
      <Accordion.Trigger>Section A</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Panel>
      <Accordion.PanelContent>Content for section A.</Accordion.PanelContent>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

Disabled item

Set disabled on an Accordion.Item to prevent it from being opened.

Available section

Disabled section

<Accordion.Item value="item2" disabled>
  <Accordion.Header>
    <Accordion.Trigger>Disabled section</Accordion.Trigger>
  </Accordion.Header>
  <Accordion.Panel>
    <Accordion.PanelContent>This section is disabled.</Accordion.PanelContent>
  </Accordion.Panel>
</Accordion.Item>

API Reference

Accordion.Root

Prop	Type	Default
children?	ReactNode	—
className?	string	—
style?	CSSProperties	—
defaultValue?	string[]	—
value?	string[]	—
onValueChange?	(value: string[]) => void	—
multiple?	boolean	—
disabled?	boolean	—

Accordion.Item

Prop	Type	Default
children?	ReactNode	—
className?	string	—
value	string	—
disabled?	boolean	—
ref?	Ref<HTMLDivElement>	—

Accordion.Header

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Accordion.Trigger

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Accordion.Panel

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Accordion.PanelContent

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—