Collapsible

A component that can be expanded or collapsed to show or hide content.

import { Collapsible, T } from '@kaynora/ui'

export default function () {
  return (
    <Collapsible label='Expand'>
      <T>Collapsible content</T>
    </Collapsible>
  )
}

The defaultOpen prop determines whether the collapsible is initially expanded or collapsed.

import { Collapsible, T } from '@kaynora/ui'

export default function () {
  return (
    <Collapsible label='Settings' defaultOpen>
      <T>Default open content</T>
    </Collapsible>
  )
}

The arrangement prop determines the position of the chevron relative to the trigger label.

import { Collapsible, T } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      display: 'flex',
      flexFlow: 'column',
      gap: '15px',
    }}>
      <Collapsible label='Leading' arrangement='leading'>
        <T>Content</T>
      </Collapsible>
      <Collapsible label='Trailing' arrangement='trailing'>
        <T>Content</T>
      </Collapsible>
    </div>
  )
}

<Collapsible />

ReactElement | ReactElement[]

string | ReactElement

boolean

boolean

(isOpen: boolean) => void

'leading' | 'trailing'

's' | 'm' | 'l'

{
  root: HTMLDivElementProps
  button: ButtonProps
  typography: TypographyProps
}