Accordion
Basic usage
<Accordion label="Accordion example">
<Block as="p">...text</Block>
</Accordion>
Usage with parent state
const MultipleControlledAccordions = () => {
const [active, setActive] = useState(-1);
return (
<>
{times(4).map((d, i) => (
<Accordion
label={`Accordion example ${i + 1}`}
key={i}
onChange={() => setActive(i)}
isOpen={i === active}
>
<Content />
</Accordion>
))}
</>
);
};
Props
Props |
Type |
Description |
Required |
Default |
label |
string |
Label |
✔︎ |
null |
children |
jsx |
Children for the Accordion's expandable content section |
✔︎ |
null |
onChange |
func |
Callback fired when accordion open state is changed |
|
null |
extend |
object |
Extend styles of accordion |
|
null |
extendContent |
object |
Extend styles of accordion content |
|
null |