Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.4

Accordion

Accordion is a component for a list that displays information in an expandable or collapsible manner.

Source@yamada-ui/accordion

Props

AccordionProps

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

defaultIndex

Description

The initial index(es) of the accordion item to expand.

Type

number | number[]

icon

Description

The accordion icon for all items to use.

Type

string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | ((props: { ...; }) => ReactNode)

iconHidden

Description

If true, hide the accordion icon for all items.

Type

boolean

Default

false

index

Description

The index(es) of the accordion item to expand.

Type

number | number[]

isMultiple

Description

If true, multiple accordion items can be expanded at once.

Type

boolean

Default

false

isToggle

Description

If true, any expanded accordion item can be collapsed again.

Type

boolean

Default

false

onChange

Description

The callback invoked when accordion items are expanded or collapsed.

Type

(index: number | number[]) => void

size

Description

The size of the Accordion.

Type

string

variant

Description

The variant of the Accordion.

Type

"basic" | "card" | "unstyled"

Default

"basic"

AccordionItemProps

icon

Description

The accordion icon to use.

Type

string | number | boolean | ((props: { isDisabled: boolean; isExpanded: boolean; }) => ReactNode) | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<...> | ReactPortal

isDisabled

Description

If true, the accordion item will be disabled.

Type

boolean

Default

false

label

Description

The accordion label to use.

Type

string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | ((props: { ...; }) => ReactNode)

AccordionLabelProps

containerProps

Description

Props the container element.

Type

HTMLUIProps

icon

Description

The accordion icon to use.

Type

string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | ((props: { ...; }) => ReactNode)

AccordionPanelProps

animationOpacity

Description

If true, the opacity of the content will be animated.

Type

boolean

Default

true

delay

Description

Custom delay definition for enter and exit.

Type

number | MotionLifecycleProps<number>

duration

Description

Custom duration definition for enter and exit.

Type

number | MotionLifecycleProps<number>

endingHeight

Description

The height you want the content in its expanded state.

Type

string | number

Default

auto

enter

Description

Custom enter.

Type

any

exit

Description

Custom exit.

Type

any

initial

Description

Custom initial.

Type

any

startingHeight

Description

The height you want the content in its collapsed state.

Type

string | number

Default

0

transition

Description

Custom transition definition for enter and exit.

Type

MotionLifecycleProps<Transition$1>

transitionEnd

Description

Custom transitionEnd definition for enter and exit.

Type

MotionLifecycleProps<MakeCustomValueType<TargetProperties>>

unmountOnExit

Description

If true, the element will unmount when isOpen={false} and animation is done.

Type

boolean

Edit this page on GitHub

PreviousDisclosureNextTabs