/ux
Components/Misc/Accordion

Accordion

Misc

Collapsible panels with animated height transitions.

Collapsible section list. Compose from Accordion, AccordionItem, AccordionTrigger, AccordionContent. Supports Radix type="single" (one open at a time) or type="multiple".

Usage

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "nosible-ux"

export default function Example() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="methodology">
        <AccordionTrigger>Signal methodology</AccordionTrigger>
        <AccordionContent>
          Signals are extracted using NLP across 94 data sources.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Examples

Multiple sections

Accessibility

Built on Radix Accordion: role="region", aria-expanded, and keyboard navigation (Space/Enter to toggle, arrow keys between triggers) are handled.

Props

Name TypeDefaultDescription
asChild
boolean | undefined—
defaultValue
string | string[] | undefined—The value of the item whose content is expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion. The value of the items whose contents are expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion.
dir
Direction | undefined—The language read direction.
disabled
boolean | undefinedfalseWhether or not an accordion is disabled from user interaction.
onValueChange
((value: string) => void) | ((value: string[]) => void) | undefined—The callback that fires when the state of the accordion changes.
orientation
"horizontal" | "vertical" | undefinedverticalThe layout in which the Accordion operates.
type
"single" | "multiple"—
value
string | string[] | undefined—The controlled stateful value of the accordion item whose content is expanded. The controlled stateful value of the accordion items whose contents are expanded.
← All ComponentsGetting Started →