Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Usage

SAccordion({ type: 'single', collapsible: true, defaultValue: ['item-1'] }) {
  SAccordionItem({ value: 'item-1' }) {
    SAccordionTrigger({ text: 'Is it accessible?' })
    SAccordionContent() { Text('Yes. It adheres to the WAI-ARIA design pattern.') }
  }
  SAccordionItem({ value: 'item-2' }) {
    SAccordionTrigger({ text: 'Is it styled?' })
    SAccordionContent() { Text('Yes. It comes with default styles that match the other components.') }
  }
  SAccordionItem({ value: 'item-3' }) {
    SAccordionTrigger({ text: 'Is it animated?' })
    SAccordionContent() { Text('Yes. It is animated by default.') }
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Multiple & controlled

type: 'multiple' keeps several items open. Bind the open items with !!.

@Local open: string[] = ['shipping'];

SAccordion({ type: 'multiple', value: this.open!! }) {
  SAccordionItem({ value: 'shipping' }) { ... }
  SAccordionItem({ value: 'returns' }) { ... }
  SAccordionItem({ value: 'support', disabled: true }) { ... }
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SAccordion

shadcn-vue Accordion: a vertically stacked set of interactive headings that each reveal a section of content.

value is always a string array (also for type: 'single', where it holds at most one entry).

Prop	Type	Default	Description
type	AccordionType AccordionType = 'single' | 'multiple'	'single'
collapsible	boolean	false	single only: allow closing the open item by tapping it again.
value!!	string[] | undefined	undefined	Controlled open items (use with !!). Leave undefined for uncontrolled.
defaultValue	string[]	[]

Event	Type	Default	Description
onValueChange	(value: string[]) => void	() => { }

Slots: children (trailing closure)

SAccordionItem

One section: border-b last:border-b-0.

Prop	Type	Default	Description
value	string	''
disabled	boolean	false

Slots: children (trailing closure)

SAccordionTrigger

The heading row: flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-sm font-medium hover:underline, with a chevron that turns 180° while open. Tapping toggles the item.

Prop	Type	Default	Description
text	ResourceStr | undefined	undefined

Slots: children (trailing closure)

SAccordionContent

Collapsible body (pt-0 pb-4 text-sm), height-animated.

Slots: children (trailing closure)