Accordion

Default

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.

import { useState } from 'react';
import type { FC } from 'react';
import { Accordion } from '@skeletonlabs/skeleton-react';
import { Club, Diamond, Heart, Spade } from 'lucide-react';

export const Page: FC = () => {
	const lorem =
		'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.';

	// State
	const [value, setValue] = useState(['club']);

	return (
		<Accordion value={value} onValueChange={setValue}>
			<Accordion.Item value="club">
				<Accordion.Control lead={<Club size={24} />}>Club</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
			<hr className="hr" />
			<Accordion.Item value="diamond">
				<Accordion.Control lead={<Diamond size={24} />}>Diamond</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
			<hr className="hr" />
			<Accordion.Item value="heart" disabled>
				<Accordion.Control lead={<Heart size={24} />}>Heart (disabled)</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
			<hr className="hr" />
			<Accordion.Item value="spade">
				<Accordion.Control lead={<Spade size={24} />}>Spade</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
		</Accordion>
	);
};

Collapsible

import { useState } from 'react';
import type { FC } from 'react';
import { Accordion } from '@skeletonlabs/skeleton-react';
import { Club, Diamond, Heart, Spade } from 'lucide-react';

export const Page: FC = () => {
	const lorem =
		'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.';

	// State
	const [value, setValue] = useState(['club']);

	return (
		<Accordion value={value} onValueChange={setValue} collapsible>
			<Accordion.Item value="club">
				<Accordion.Control lead={<Club size={24} />}>Club</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
			<hr className="hr" />
			<Accordion.Item value="diamond">
				<Accordion.Control lead={<Diamond size={24} />}>Diamond</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
			<hr className="hr" />
			<Accordion.Item value="heart" disabled>
				<Accordion.Control lead={<Heart size={24} />}>Heart (disabled)</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
			<hr className="hr" />
			<Accordion.Item value="spade">
				<Accordion.Control lead={<Spade size={24} />}>Spade</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
		</Accordion>
	);
};

Multiple

import { useState } from 'react';
import type { FC } from 'react';
import { Accordion } from '@skeletonlabs/skeleton-react';
import { Club, Diamond, Heart, Spade } from 'lucide-react';

export const Page: FC = () => {
	const lorem =
		'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.';

	// State
	const [value, setValue] = useState(['club']);

	return (
		<Accordion value={value} onValueChange={setValue} multiple>
			<Accordion.Item value="club">
				<Accordion.Control lead={<Club size={24} />}>Club</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
			<hr className="hr" />
			<Accordion.Item value="diamond">
				<Accordion.Control lead={<Diamond size={24} />}>Diamond</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
			<hr className="hr" />
			<Accordion.Item value="heart" disabled>
				<Accordion.Control lead={<Heart size={24} />}>Heart (disabled)</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
			<hr className="hr" />
			<Accordion.Item value="spade">
				<Accordion.Control lead={<Spade size={24} />}>Spade</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
		</Accordion>
	);
};

Open State

Each Item id added to the Accordion value array will be open by default.

useState Hook

const [value, setValue] = useState(['club']);

<Accordion value={value} onValueChange={setValue}>
  ...
</Accordion>

Harcoded

<Accordion value={['club']}>...</Accordion>

Multiple Items

Use multiple to enable multiple items to be opened at once.

<Accordion multiple>...</Accordion>

Custom Icons

import { Plus, Minus, Heart } from 'lucide-react';

<Accordion iconOpen={<Plus size={24} />} iconClosed={<Minus size={24} />}>
  ...
</Accordion>

<Accordion.Control lead={<Heart size={24} />}>Heart</Accordion.Control>

API Reference

Property	Type	Description
`animDuration`	number	The slide animation duration as a float value (ex: 0.2).
`iconOpen`	React.ReactNode	Set the open state icon.
`iconClosed`	React.ReactNode	Set the closed state icon.
`onValueChange`	object	Set the opened state.
`base`	string	Sets base styles.
`padding`	string	Set padding styles.
`spaceY`	string	Set vertical spacing styles.
`rounded`	string	Set border radius styles.
`width`	string	Set the width styles.
`classes`	string	Provide arbitrary CSS classes.
`children`	React.ReactNode	-
`value`	array	The `value` of the accordion items that are currently being expanded.
`dir`	string	The document's text/writing direction. Default: ltr
`getRootNode`	object	A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`disabled`	boolean	Whether the accordion items are disabled
`multiple`	boolean	Whether multple accordion items can be expanded at the same time. Default: false
`ids`	Partial<...>	The ids of the elements in the accordion. Useful for composition.
`collapsible`	boolean	Whether an accordion item can be closed after it has been expanded. Default: false
`onFocusChange`	object	The callback fired when the focused accordion item changes.

AccordionItem

Property	Type	Description
`base`	string	Sets base styles.
`spaceY`	string	Set vertical spacing styles.
`classes`	string	Provide arbitrary CSS classes.
`children`	React.ReactNode	-
`value` *	string	The value of the accordion item.
`disabled`	boolean	Whether the accordion item is disabled.

AccordionControl

Property	Type	Description
`headingElement`	string	The heading element.
`disabled`	boolean	Set a disabled state for the item.
`base`	string	Sets control's base styles.
`hover`	string	Sets control's the hover styles.
`padding`	string	Sets control's the padding styles.
`rounded`	string	Sets control's the border radius styles.
`classes`	string	Provide arbitrary CSS classes to the control.
`leadBase`	string	Sets the lead's base styles
`leadClasses`	string	Provide arbitrary CSS classes to the lead.
`contentBase`	string	Sets the lead's base styles
`contentClasses`	string	Provide arbitrary CSS classes to the content.
`indicatorBase`	string	Sets the lead's base styles
`indicatorClasses`	string	Provide arbitrary CSS classes to the indicator.
`lead`	React.ReactNode	The lead child slot for the control.
`children`	React.ReactNode	-

AccordionPanel

Property	Type	Description
`base`	string	Set the panel's base styles.
`padding`	string	Set the panel's padding styles.
`rounded`	string	Set the panel's border-radius styles.
`classes`	string	Provide arbitrary CSS classes to the panel.
`children`	React.ReactNode	-

Default

Club-

Diamond+

Heart (disabled)+

Spade+

Collapsible

Club-

Diamond+

Heart (disabled)+

Spade+

Multiple

Club-

Diamond+

Heart (disabled)+

Spade+

Open State

useState Hook

Harcoded

Multiple Items

Custom Icons

API Reference

Accordion

AccordionItem

AccordionControl

AccordionPanel