calcite_accordion: Create a Calcite Accordion Component

In calcite: Bindings to the Calcite Design System 'JavaScript' Component Library

Create a Calcite Accordion Component

Description

Accordions are most often used for hiding and showing sections of related content. They can have different selection modes, allowing users to have multiple or single accordion item(s) open.

Usage

calcite_accordion(
  ...,
  id = NULL,
  appearance = NULL,
  icon_position = NULL,
  icon_type = NULL,
  scale = NULL,
  selection_mode = NULL
)

Arguments

...	One or more calcite_accordion_item() components
id	Component ID (required for Shiny reactivity)
appearance	Visual style: "solid" or "transparent" (default: "solid")
icon_position	Placement of the icon in the header: "start" or "end" (default: "end")
icon_type	Type of icon in the header: "chevron", "caret", or "plus-minus" (default: "chevron")
scale	Size of the component: "s" (small), "m" (medium), or "l" (large) (default: "m")
selection_mode	Selection mode: "multiple" allows any number of selections, "single" allows only one selection, "single-persist" allows one selection and prevents de-selection (default: "multiple")

Details

Usage

• To organize related text-based content.

• To shorten pages and reduce scrolling when content is not crucial to read in full.

Best practices

• Use Accordion to contain related but distinct, primarily text-based content.

• Use Accordion within the main content area of an application to save space.

• Avoid using Accordion within a Panel. Instead, use one or more Block(s).

• Avoid using Accordion to house interactive controls or form-based components.

Shiny Integration

The accordion tracks which items are expanded based on its selection mode.

Available properties in input$id:

• ⁠$appearance⁠ - The visual style

• ⁠$iconPosition⁠ - Icon placement

• ⁠$iconType⁠ - Icon type

• ⁠$scale⁠ - Size

• ⁠$selectionMode⁠ - Selection mode

Value

An object of class calcite_component

References

Official Documentation

Examples

# Basic accordion with multiple selection
calcite_accordion(
  id = "my_accordion",
  calcite_accordion_item(
    heading = "Watercraft",
    description = "Yachts, boats, and dinghies",
    icon_start = "embark",
    "Recommended for coastal use"
  ),
  calcite_accordion_item(
    heading = "Automobiles",
    description = "Cars, trucks, and buses",
    icon_start = "car",
    "A good choice for inland adventure"
  )
)

# Single selection accordion
calcite_accordion(
  selection_mode = "single",
  appearance = "transparent",
  icon_type = "plus-minus",
  calcite_accordion_item(
    heading = "Section 1",
    "Content 1"
  ),
  calcite_accordion_item(
    heading = "Section 2",
    "Content 2"
  )
)

calcite documentation built on March 3, 2026, 5:07 p.m.