Accordion API

API documentation for Accordion component

AccordionRoot#

Props#

Defines valid properties in Accordion component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AccordionRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AccordionRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AccordionRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AccordionRootInstance) => ReactNode)	null	The children to render.
lazy	boolean	false	When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
tabIndex	number	0	Index of the element in tabbing order.
onValueChange	(event: AccordionRootValueChangeEvent) => void	null	Callback fired when the accordion's value changes.
defaultValue	string \| number \| (string \| number)[]	null	Default value of the active panel or an array of values in multiple mode.
value	string \| number \| (string \| number)[]	null	Value of the active panel or an array of values in multiple mode.
multiple	boolean	false	When enabled, multiple tabs can be activated at the same time.
openOnFocus	boolean	false	When enabled, the accordion panel will be opened on focus.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in AccordionRoot component.

name	type	default	description
value	string \| number \| (string \| number)[]	null	Value of the active panel or an array of values in multiple mode.

Exposes#

Defines the methods and properties exposed by Accordion component.

name	type	default	description
state	useAccordionState	null	The state of the useAccordion.
updateValue	(event: SyntheticEvent, key: string \| number) => void	null	The method to update the value of the active panel.
isItemActive	(key: string \| number) => boolean	null	The method to check if the panel is active.
onTriggerClick	(event: MouseEvent<HTMLButtonElement>, value: string \| number) => void	null	The method to handle the click event of the accordion trigger.
onTriggerFocus	(event: FocusEvent<HTMLButtonElement>, value: string \| number) => void	null	The method to handle the focus event of the accordion trigger.
onTriggerKeyDown	(event: KeyboardEvent<HTMLButtonElement>, value: string \| number) => void	null	The method to handle the key down event of the accordion trigger.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Accordion component.

name	type	default	description
root	AccordionRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
panel	AccordionRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the panel's DOM element.
header	AccordionRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the header's DOM element.
content	AccordionRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the content's DOM element.
headerindicator	AccordionRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the header indicator's DOM element.

Types#

Instance

Instance of AccordionRoot component.

values
ComponentInstance<AccordionRootProps, AccordionRootState, AccordionRootExposes>

AccordionPanel#

Props#

Defines valid properties in AccordionPanel component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AccordionPanelInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AccordionPanelInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AccordionPanelPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AccordionPanelInstance) => ReactNode)	null	The children to render.
value	string \| number	null	Unique value of item.
disabled	boolean	false	Whether the item is disabled.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AccordionPanel component.

name	type	default	description
accordion	AccordionRootInstance	null	The Accordion component instance.
active	boolean	null	Whether the item is active.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AccordionPanel component.

name	type	default	description
root	AccordionPanelPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AccordionPanel component.

values
ComponentInstance<AccordionPanelProps, AccordionPanelState, AccordionPanelExposes>

AccordionHeader#

Props#

Defines valid properties in AccordionHeader component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AccordionHeaderInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AccordionHeaderInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AccordionHeaderPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AccordionHeaderInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AccordionHeader component.

name	type	default	description
accordion	AccordionRootInstance	null	The Accordion component instance.
accordionpanel	AccordionPanelInstance	null	The AccordionPanel component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of AccordionHeader component.

name	type	default	description
root	AccordionHeaderPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of AccordionHeader component.

values
ComponentInstance<AccordionHeaderProps, AccordionHeaderState, AccordionHeaderExposes>

AccordionHeaderIndicator#

Props#

Exposes#

Interfaces#

Types#

AccordionContent#

Props#

Defines valid properties in AccordionContent component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: AccordionContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: AccordionContentInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<AccordionContentPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: AccordionContentInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by AccordionContent component.

name	type	default	description
accordion	AccordionRootInstance	null	The Accordion component instance.

Types#

Instance

Instance of AccordionContent component.

values
ComponentInstance<AccordionContentProps, AccordionContentState, AccordionContentExposes>