Photonix UI - React Components, Templates & Figma Design System

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Preview

Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

Is it styled?

Yes. It comes with default styles that matches the other components' aesthetic.

Is it animated?

Yes. It's animated by default, but you can disable it if you prefer.

Usage

import { Accordion, AccordionItem, Text } from '@photonix/ultimate';

<Accordion defaultValue={['item-1']}>
  <AccordionItem value="item-1" label="Is it accessible?">
    <Text variant="body-md" color="secondary">
      Yes. It adheres to the WAI-ARIA design pattern.
    </Text>
  </AccordionItem>
  <AccordionItem value="item-2" label="Is it styled?">
    <Text variant="body-md" color="secondary">
      Yes. It comes with default styles that matches the other components' aesthetic.
    </Text>
  </AccordionItem>
</Accordion>

Component API

Accordion

Prop	Type	Default	Description
defaultValue	`string[]`	`[]`	Default expanded items (uncontrolled)
value	`string[]`	`-`	Controlled expanded items
onValueChange	`((value: string[]) => void)`	`-`	Callback when expanded items change
allowMultiple	`boolean`	`false`	Allow multiple items to be expanded
variant	`"default" \| "outlined" \| "elevated"`	`'outlined'`	Visual variant of the accordion container
children	`React.ReactNode`	`-`	Children elements

AccordionItem

Prop	Type	Default	Description
value	`string`	`-`	Unique value for this item
isDisabled	`boolean`	`false`	Whether this item is disabled
label	`string`	`-`	Label text for the accordion header
description	`string`	`-`	Description text (optional)
leadingIcon	`React.ReactNode`	`-`	Leading icon (optional)
children	`React.ReactNode`	`-`	Children elements (content when expanded)
className	`string`	`-`	Additional class name

Variants

Allow Multiple

Set allowMultiple prop to allow expanding multiple items at once.

First Item

This item is expanded by default.

Second Item

This item is also expanded by default independently.

Third Item

Click to expand me without closing others.

Allow Multiple

import { Accordion, AccordionItem, Text } from '@photonix/ultimate';

<Accordion allowMultiple defaultValue={['item-1', 'item-2']}>
  <AccordionItem value="item-1" label="First Item">
    <Text variant="body-md" color="secondary">
      This item is expanded by default.
    </Text>
  </AccordionItem>
  <AccordionItem value="item-2" label="Second Item">
    <Text variant="body-md" color="secondary">
      This item is also expanded by default independently.
    </Text>
  </AccordionItem>
  <AccordionItem value="item-3" label="Third Item">
    <Text variant="body-md" color="secondary">
      Click to expand me without closing others.
    </Text>
  </AccordionItem>
</Accordion>

With Icons

You can add leading icons to the accordion trigger using the leadingIcon prop.

Information

Important information goes here.

Warning

Be careful with this action.

With Icons

import { InformationOutline, WarningOutline } from '@photonix/icons';
import { Text } from '@photonix/ultimate';

<Accordion>
  <AccordionItem value="info" label="Information" leadingIcon={<InformationOutline />}>
    <Text variant="body-md" color="secondary">Important information goes here.</Text>
  </AccordionItem>
  <AccordionItem value="warning" label="Warning" leadingIcon={<WarningOutline />}>
    <Text variant="body-md" color="secondary">Be careful with this action.</Text>
  </AccordionItem>
</Accordion>

Disabled Usage

Disable specific items using the isDisabled prop.

Enabled Item

This item functions normally.

Disabled Item

You cannot expand this item.

Disabled Usage

import { Accordion, AccordionItem, Text } from '@photonix/ultimate';

<Accordion>
  <AccordionItem value="item-1" label="Enabled Item">
    <Text variant="body-md" color="secondary">This item functions normally.</Text>
  </AccordionItem>
  <AccordionItem value="item-2" label="Disabled Item" isDisabled>
    <Text variant="body-md" color="secondary">You cannot expand this item.</Text>
  </AccordionItem>
</Accordion>

Accordion

Preview

Component API

Accordion

AccordionItem

Variants

Allow Multiple

With Icons

Disabled Usage

On this page