Expander

An accordion component for collapsible content sections. Supports single and multiple expansion modes.

Single (Accordion)

A React component library with accessible, customizable UI components.

Run npm install trust-ui in your project.

Yes, all components follow WAI-ARIA patterns.

Multiple

Content for section A.

Content for section B.

Content for section C.

Variants

Content inside a bordered expander.

Separated variant

separated renders each item as its own card with gap between — useful when items represent independent units (settings groups, product features) rather than a connected accordion.

Update your account info, photo, and bio.

Choose which events email you.

Disabled Item

This item can be expanded.

This content is hidden.

Expander Props

Prop	Type	Default	Description
type	'single' | 'multiple'	'single'	Single (accordion) or multiple items open at once
defaultValue	string | string[]	-	Initially open item(s) (uncontrolled)
value	string | string[]	-	Controlled open item(s)
onChange	(value: string | string[]) => void	-	Callback when open items change
variant	'default' | 'bordered' | 'separated'	'default'	Visual variant
children	ReactNode	-	Children
className	string	-	Additional CSS class
style	CSSProperties	-	Inline styles

Expander.Item Props

Prop	Type	Default	Description
value	string	-	Unique value identifying this item
disabled	boolean	false	Disabled state
className	string	-	Additional CSS class
children	ReactNode	-	Children (Trigger + Content)

Expander.Trigger Props

Prop	Type	Default	Description
children	ReactNode	-	Trigger label
className	string	-	Additional CSS class

Expander.Content Props

Prop	Type	Default	Description
children	ReactNode	-	Content
className	string	-	Additional CSS class