Expandable


Examples

Content here

margin
Learn More
accent
bool | string
Possible values:
"orange"
"blue"
"red"
"yellow"
"green"
"purple"
"navy"
"gray"
Renders an accent border at the top of the expandable panel. If bool is used it defaults to blue
defaultOpen
bool
Default open state when not controlled
icon
node
Optional React node for an image or icon. Works best with an SVG optimized for 40x40
id
string
Required
Required for accessibility between header and content
open
bool
Controls the open state
onToggle
function
default: (e) => void
Callback for when expandable is toggled. Optional, but required when controlling open state
subtitle
node
Content area beneath header title
title
string
The header title
variant
string
default: "bordered"
Possible values:
"borderd"
"borderless"
Bordered: renders a standalone expandable section.
Borderless: renders a expandable section without borders and modified padding.