Documentation
Accordion

Accordion

I ordered a chicken and an egg on Amazon. I'll let you know...

Example

import { Accordion } from '@i4o/catalystui'
 
export default () => {
	return (
		<Accordion
			collapsible={true}
			defaultValue={'1'}
			items={[
				{
					id: '1',
					title: 'Dad Joke 1',
					content:
						"I ordered a chicken and an egg on Amazon. I'll let you know...",
				},
				{
					id: '2',
					title: 'Dad Joke 2',
					content:
						"Singing in the shower is fun until you get soap in your mouth. Then it's a soap opera.",
				},
				{
					id: '3',
					title: 'Dad Joke 3',
					content:
						'When two vegans get in an argument, is it still called a beef?',
				},
			]}
			type='single'
		/>
	)
}

Props

NameTypeDefaultDescription
collapsiblebooleantrueWhether the accordion can be collapsed.
defaultValuestring[][]The default value of the accordion.
itemsArray<{ id: string, title: string | ReactNode, content: string | ReactNode }>[]The items to display in the accordion.
type'multiple' | 'single''single'The type of accordion.