Photonix

Accordion

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

Preview

OverviewProject summary and current state

Q2 planning is ready for stakeholder review.

Open sections stay mounted so users can compare details.

Editors can update milestones and publish release notes.

Usage
"use client";

import { Accordion, AccordionItem, Stack, Text } from '@photonix/ultimate';
import { DocumentOutline, SettingsOutline } from '@photonix/icons';

export default function AccordionBasicExample() {
    return (
        <Accordion defaultValue={['overview']} allowMultiple variant="outlined">
            <AccordionItem
                value="overview"
                label="Overview"
                description="Project summary and current state"
                leadingIcon={<DocumentOutline />}
            >
                <Stack gap="xs">
                    <Text variant="body-md">Q2 planning is ready for stakeholder review.</Text>
                    <Text variant="body-sm" color="secondary">Open sections stay mounted so users can compare details.</Text>
                </Stack>
            </AccordionItem>
            <AccordionItem
                value="settings"
                label="Settings"
                description="Permissions and delivery preferences"
                leadingIcon={<SettingsOutline />}
            >
                <Text variant="body-md">Editors can update milestones and publish release notes.</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

Basic accordion

A grouped disclosure pattern with multiple open sections.

OverviewProject summary and current state

Q2 planning is ready for stakeholder review.

Open sections stay mounted so users can compare details.

Editors can update milestones and publish release notes.

Basic accordion
"use client";

import { Accordion, AccordionItem, Stack, Text } from '@photonix/ultimate';
import { DocumentOutline, SettingsOutline } from '@photonix/icons';

export default function AccordionBasicExample() {
    return (
        <Accordion defaultValue={['overview']} allowMultiple variant="outlined">
            <AccordionItem
                value="overview"
                label="Overview"
                description="Project summary and current state"
                leadingIcon={<DocumentOutline />}
            >
                <Stack gap="xs">
                    <Text variant="body-md">Q2 planning is ready for stakeholder review.</Text>
                    <Text variant="body-sm" color="secondary">Open sections stay mounted so users can compare details.</Text>
                </Stack>
            </AccordionItem>
            <AccordionItem
                value="settings"
                label="Settings"
                description="Permissions and delivery preferences"
                leadingIcon={<SettingsOutline />}
            >
                <Text variant="body-md">Editors can update milestones and publish release notes.</Text>
            </AccordionItem>
        </Accordion>
    );
}

With Icons

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

Important information goes here.

Be careful with this action.

With Icons
"use client";

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

export default function AccordionWithIconsExample() {
    return (
        <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.

This item functions normally.

You cannot expand this item.

Disabled Usage
"use client";

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

export default function AccordionDisabledExample() {
    return (
        <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>
    );
}

On this page

Preview
Component API
Variants
Basic
With Icons
Disabled
Photonix UI - React Components, Templates & Figma Design System