Collapsible

A section that opens and closes.

Machine wash at 40°C.

Tumble dry low, iron while damp.

Collapsible.tsx

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
  Text
} from 'alinea/components'

export function CollapsibleExample() {
  return (
    <Collapsible defaultOpen style={{width: 320}}>
      <CollapsibleTrigger>Care instructions</CollapsibleTrigger>
      <CollapsibleContent>
        <Text as="p">Machine wash at 40°C.</Text>
        <Text as="p">Tumble dry low, iron while damp.</Text>
      </CollapsibleContent>
    </Collapsible>
  )
}

Props

`<Collapsible>`

A panel that expands and collapses its content

PropTypeDefaultDescription

disabledbooleanDefault false

idstringDefault –

openbooleanDefault –

defaultOpenbooleanDefault false

onOpenChange(open: boolean) => voidDefault –

Also accepts className and style and data-* attributes.

`<CollapsibleTrigger>`

The button that toggles the collapsible. By default it renders a fold icon followed by the children as title.

PropTypeDefaultDescription

asChildbooleanDefault –Merge the trigger behavior onto the single child element

onClick(event: MouseEvent<HTMLButtonElement>) => voidDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<CollapsibleContent>`

The content shown while the collapsible is open

PropTypeDefaultDescription

childrenReactNodeDefault –

Also accepts className and style and data-* attributes.