Alternatives Card — Cards are highly flexible component to display a subject with its related information.
Tile — Tiles are used to display context information to help user complete a task or act as an entry point for more detail. They can also be used to display a list of loosely connected options to help the user gather information quickly at a glance.
ArrayField — The ArrayField is a form input for capturing multiple instances of multiple fields, saving valuable screen space.
Design guidelines Don’t place accordions inside accordions
Don't place large forms inside accordions
Keep the labels short to aid scanability
Accordions can be used for filtering - however for use within forms please use the Array Field component
Primitives This package exposes a number of primitives that can be used to compose accordion.
Accordion Renders the root of an accordion.
Basic usage All accordion primitives must be used as children of this component.
< Accordion > { } < Accordion >
type Has 2 possible values:
single
Only 1 item can be open at a time. Opening an item closes the currently open item.
< Accordion type = " single " > < Accordion >
multiple
Multiple items can be open at the same time.
< Accordion type = " single " > < Accordion >
defaultValue Set an item to be open by default.
< Accordion defaultValue = " unique-item-value-3 " > < Accordion >
This prop is only effectual in uncontrolled mode.
Controlled vs uncontrolled By default, the Accordion is uncontrolled which means users can toggle items without the value being set manually.
The value and onValueChange props can be used to gain full control of the component.
Note : The type of value and onValueChange change based on the value of the type prop.
const [ value , setValue ] = useState ( "unique-item-value-3" )
< Accordion value = { value } onValueChange = { ( value ) => setValue ( value ) } > </ Accordion >
const [ values , setValues ] = useState ( [ "unique-item-value-3" ] )
< Accordion value = { values } onValueChange = { ( value ) => setValue ( values ) } > </ Accordion >
Accordion.Item Renders a single item.
Basic usage Can only be used inside Accordion.
< Accordion.Item > { } < Accordion.Item >
value A unique value for the item that's used to toggle its open/closed state. This value is what the defaultValue, value and onValueChange props in Accordion refer to.
< Accordion.Item value = " item-1 " > < Accordion.Item >
< Accordion.Item value = " item-2 " > < Accordion.Item >
< Accordion.Item value = " item-3 " > < Accordion.Item >
Renders the header for an item that also serves as a trigger for open/close.
Basic usage Can only be used inside an Accordion.Item.
Children are rendered in a flex:row container.
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading
</ Heading >
</ Accordion.ItemHeader >
Accordion.ItemContent Renders the collapsible content for an item.
Basic usage Can only be used inside an Accordion.Item.
< Accordion.ItemContent > Content </ Accordion.ItemContent >
Recipes Single uncontrolled
< Accordion type = " single " >
< Accordion.Item value = " item-1 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 1
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 1 </ Accordion.ItemContent >
</ Accordion.Item >
< Accordion.Item value = " item-2 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 2
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 2 </ Accordion.ItemContent >
</ Accordion.Item >
< Accordion.Item value = " item-3 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 3
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 3 </ Accordion.ItemContent >
</ Accordion.Item >
</ Accordion >
Multiple uncontrolled
< Accordion type = " multiple " >
< Accordion.Item value = " item-1 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 1
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 1 </ Accordion.ItemContent >
</ Accordion.Item >
< Accordion.Item value = " item-2 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 2
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 2 </ Accordion.ItemContent >
</ Accordion.Item >
< Accordion.Item value = " item-3 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 3
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 3 </ Accordion.ItemContent >
</ Accordion.Item >
</ Accordion >
Single controlled
const [ value , setValue ] = useState ( ) ;
return (
< Stack gap = " large " >
< Text > Controlled value : { value } </ Text >
< Accordion
type = " single "
value = { value }
onValueChange = { ( value ) => setValue ( value ) }
>
< Accordion.Item value = " item-1 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 1
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 1 </ Accordion.ItemContent >
</ Accordion.Item >
< Accordion.Item value = " item-2 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 2
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 2 </ Accordion.ItemContent >
</ Accordion.Item >
< Accordion.Item value = " item-3 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 3
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 3 </ Accordion.ItemContent >
</ Accordion.Item >
</ Accordion >
</ Stack >
) ;
Multiple controlled
const [ values , setValues ] = useState ( [ ] ) ;
return (
< Stack gap = " large " >
< Text > Controlled values : { JSON . stringify ( values , null , 2 ) } </ Text >
< Accordion
type = " multiple "
value = { values }
onValueChange = { ( values ) => setValues ( values ) }
>
< Accordion.Item value = " item-1 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 1
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 1 </ Accordion.ItemContent >
</ Accordion.Item >
< Accordion.Item value = " item-2 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 2
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 2 </ Accordion.ItemContent >
</ Accordion.Item >
< Accordion.Item value = " item-3 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 3
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 3 </ Accordion.ItemContent >
</ Accordion.Item >
</ Accordion >
</ Stack >
) ;
< Accordion type = " multiple " >
< Accordion.Item value = " item-1 " >
< Accordion.ItemHeader >
< Inline gap = " small " >
< Heading level = " 6 " align = " start " >
Heading 1
</ Heading >
< NotificationBadge tone = " informative " value = { 3 } />
</ Inline >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 1 </ Accordion.ItemContent >
</ Accordion.Item >
< Accordion.Item value = " item-2 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 2
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 2 </ Accordion.ItemContent >
</ Accordion.Item >
< Accordion.Item value = " item-3 " >
< Accordion.ItemHeader >
< Heading level = " 6 " align = " start " >
Heading 3
</ Heading >
</ Accordion.ItemHeader >
< Accordion.ItemContent > Content 3 </ Accordion.ItemContent >
</ Accordion.Item >
</ Accordion >
