Collapse

Display large amounts of text in collapsible sections. Commonly referred to as an accordion.

Usage

First of all, you need to import the Collapse component from the kitchn package.

import { Collapse } from "kitchn"

Default

<Container gap={"small"}>
  <Collapse title="Question A">
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </Text>
  </Collapse>
  <Collapse title="Question B">
    <Text>
      Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur.
    </Text>
  </Collapse>
</Container>

↓Code Editor

<Container gap={"small"}>
  <Collapse title="Question A">
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </Text>
  </Collapse>
  <Collapse title="Question B">
    <Text>
      Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur.
    </Text>
  </Collapse>
</Container>

Expanded

<Container gap={"small"}>
  <Collapse title="Question A" defaultExpanded>
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </Text>
  </Collapse>
  <Collapse title="Question B">
    <Text>
      Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur.
    </Text>
  </Collapse>
</Container>

↓Code Editor

<Container gap={"small"}>
  <Collapse title="Question A" defaultExpanded>
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </Text>
  </Collapse>
  <Collapse title="Question B">
    <Text>
      Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur.
    </Text>
  </Collapse>
</Container>

Subtitle

<Container gap={"small"}>
  <Collapse
  title="Question A"
  subtitle="More description about Question A"
  >
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </Text>
  </Collapse>
  <Collapse title="Question B">
    <Text>
      Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur.
    </Text>
  </Collapse>
</Container>

↓Code Editor

<Container gap={"small"}>
  <Collapse
  title="Question A"
  subtitle="More description about Question A"
  >
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </Text>
  </Collapse>
  <Collapse title="Question B">
    <Text>
      Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur.
    </Text>
  </Collapse>
</Container>

Card

<Container gap={"small"}>
  <Collapse title="Question A" card>
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </Text>
  </Collapse>
</Container>

↓Code Editor

<Container gap={"small"}>
  <Collapse title="Question A" card>
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </Text>
  </Collapse>
</Container>

Small

<Container gap={"small"}>
  <Collapse title="Question A" size="small">
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </Text>
  </Collapse>
</Container>

↓Code Editor

<Container gap={"small"}>
  <Collapse title="Question A" size="small">
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
      enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </Text>
  </Collapse>
</Container>

Props

Name	Type	Default	Required	Description	Accepted values
`title`	`string`	-	✅	The title of the collapse.	-
`subtitle`	`React.ReactNode`	-	-	The subtitle of the collapse.	-
`children`	`React.ReactNode`	-	-		-
`defaultExpanded`	`boolean`	`false`	-	The status of the collapse (expanded or not).	-
`card`	`boolean`	-	-	The type of the collapse (whether it's a card or not).	-
`size`	`string`	`medium`	-	The size of the collapse.	`normal`, `small`, `medium`

Checkbox Combobox