Leave Yamada UI a star
StarAccordion is a component for a list that displays information in an expandable or collapsible manner.
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"Description
The initial index(es) of the accordion item to expand.
Type
number | number[]Description
The accordion icon for all items to use.
Type
string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | ((props: { ...; }) => ReactNode)Description
The index(es) of the accordion item to expand.
Type
number | number[]Description
If true, multiple accordion items can be expanded at once.
Deprecated
Use multiple instead.
Type
booleanDefault
falseDescription
If true, any expanded accordion item can be collapsed again.
Deprecated
Use toggle instead.
Type
booleanDefault
falseDescription
If true, multiple accordion items can be expanded at once.
Type
booleanDefault
falseDescription
The callback invoked when accordion items are expanded or collapsed.
Type
(index: number | number[]) => voidDescription
The size of the Accordion.
Type
stringDescription
If true, any expanded accordion item can be collapsed again.
Type
booleanDefault
falseDescription
The variant of the Accordion.
Type
"basic" | "card" | "unstyled"Default
"basic"Description
If true, the accordion item will be disabled.
Type
booleanDefault
falseDescription
The accordion icon to use.
Type
string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | ((props: { ...; }) => ReactNode)Description
If true, the accordion item will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseDescription
The accordion label to use.
Type
string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | ((props: { ...; }) => ReactNode)Description
Props the container element.
Type
HTMLUIPropsDescription
The accordion icon to use.
Type
string | number | boolean | ((props: { isDisabled: boolean; isExpanded: boolean; disabled?: boolean | undefined; expanded?: boolean | undefined; }) => ReactNode) | ReactElement<any, string | JSXElementConstructor<...>> | Iterable<...> | ReactPortalDescription
If true, the opacity of the content will be animated.
Type
booleanDefault
trueDescription
Custom delay definition for enter and exit.
Type
number | MotionLifecycleProps<number>Description
Custom duration definition for enter and exit.
Type
number | MotionLifecycleProps<number>Description
The height you want the content in its expanded state.
Type
string | numberDefault
autoDescription
Custom enter.
Type
anyDescription
Custom exit.
Type
anyDescription
Custom initial.
Type
anyDescription
Show the component. triggers when enter or exit states.
Type
booleanDescription
The height you want the content in its collapsed state.
Type
string | numberDefault
0Description
Custom transition definition for enter and exit.
Type
MotionLifecycleProps<Transition$1>Description
Custom transitionEnd definition for enter and exit.
Type
MotionLifecycleProps<MakeCustomValueType<TargetProperties>>Description
If true, the element will unmount when isOpen={false} and animation is done.
Type
booleanEdit this page on GitHub