Collapse — Hesoyam

Default

Inside a group, opening one panel closes the others.


        
          1
          
          <CollapseGroup>
        

          2
          
            <Collapse title="What is a token?">
        

          3
          
              A token authenticates API calls for one project. Rotate it if it leaks.
        

          4
          
            </Collapse>
        

          5
          
            <Collapse title="Where are tokens stored?">
        

          6
          
              Only the hash is stored. The plaintext value is shown once at creation.
        

          7
          
            </Collapse>
        

          8
          
          </CollapseGroup>

Expanded

defaultExpanded opens a panel on mount. In a single-select group, only the first such panel stays open.


        
          1
          
          <CollapseGroup>
        

          2
          
            <Collapse title="What is a token?">
        

          3
          
              A token authenticates API calls for one project.
        

          4
          
            </Collapse>
        

          5
          
            <Collapse title="Where are tokens stored?" default-expanded>
        

          6
          
              Only the hash is stored. The plaintext value is shown once.
        

          7
          
            </Collapse>
        

          8
          
          </CollapseGroup>

Multiple

multiple lets independent panels stay open together.


        
          1
          
          <CollapseGroup multiple>
        

          2
          
            <Collapse title="Read access" default-expanded>
        

          3
          
              List projects, deployments, and usage. Cannot mutate.
        

          4
          
            </Collapse>
        

          5
          
            <Collapse title="Write access" default-expanded>
        

          6
          
              Create tokens, rotate secrets, and change project settings.
        

          7
          
            </Collapse>
        

          8
          
          </CollapseGroup>

Small

small is 13px with tighter padding. Use it in dense settings, not as page structure.


        
          1
          
          <Collapse size="small" title="Advanced Settings">
        

          2
          
            Payload previews and raw request bodies live here. Most visits can skip this.
        

          3
          
          </Collapse>

Controlled

Pass expanded and listen for update:expanded when the parent owns the open state. The title slot replaces the title prop.

Logs older than 30 days are dropped. Export before then.


        
          1
          
          <Collapse
        

          2
          
            title="Retention"
        

          3
          
            :expanded="open"
        

          4
          
            @update:expanded="open = $event"
        

          5
          
          >
        

          6
          
            Logs older than 30 days are dropped. Export before then.
        

          7
          
          </Collapse>

Best practices

Collapse hides optional or repetitive content (FAQ, advanced settings, payload preview). Primary page structure stays as normal headings.
One optional block is a lone Collapse. A related set goes in CollapseGroup. Sibling views of the same data are Tabs.
Default closed unless the first visit cannot act without the body. In a group, skip multiple when items are mutually exclusive.
Title Case the heading and name the topic, not the action — Advanced Settings, not Show Advanced Settings.
Do not nest Collapse more than one level. Do not bury a primary destructive action inside a closed panel.
Sizes are medium (default) and small. The trigger already exposes aria-expanded and aria-controls.