Components

Accordion

A vertically stacked set of disclosure panels. One-at-a-time or many-at-a-time.

A token-driven set of accessible primitives wrapping radix-ui with CSS Modules.

Multiple

Open and close panels independently.

Usage

import { Accordion } from '@onersoft/design-system'

<Accordion.Root type="single" collapsible>
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger>Heading</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>Body</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

Props

Accordion.Root mirrors Radix Accordion.Root. Most-used:

PropTypeDefault
type'single' | 'multiple'
collapsiblebooleanfalse
defaultValuestring | string[]
valuestring | string[]
onValueChange(value) => void

On this page