reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Accordion
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Accordion

Component

Stack expandable panels with single, multiple, and collapsible modes.

Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

단일 (collapsible)

Core·Shells·Surfaces로 구성된 공유 UI 컴포넌트 라이브러리입니다. 차트는 opt-charts가 담당합니다.

다중 (multiple)

여러 패널을 동시에 열 수 있습니다.
이 패널도 함께 열려 있습니다.

AccordionRoot

PropTypeDefaultDescription
type"single" | "multiple"—한 개만 열림(single) 또는 여러 개 열림(multiple). 기본 single
valuestring | string[] | null—열린 항목 값. single은 string|null, multiple은 string[]
defaultValuestring | string[] | null—비제어 초기 열림 값
onValueChange(value: string | string[] | null) => void—열림 변경 콜백
collapsibleboolean—single 모드에서 열린 패널을 다시 닫을 수 있게 허용
disabledboolean—전체 비활성화
animatedboolean—콘텐츠 enter/leave 애니메이션 (기본 true)
childrenReactNode—AccordionItem 목록

AccordionItem

PropTypeDefaultDescription
valueRequiredstring—항목 식별 값
disabledboolean—이 항목만 비활성화
childrenReactNode—Trigger + Content

AccordionTrigger

PropTypeDefaultDescription
childrenRequiredReactNode—헤더 라벨 (쉐브론 아이콘 자동 추가)

AccordionContent

PropTypeDefaultDescription
childrenRequiredReactNode—펼쳐지는 패널 본문
View test results

테스트 커버리지

2026년 7월 9일5/5 통과
5성공
0실패
5전체
  • 트리거 클릭으로 패널을 연다
  • single 모드: 다른 패널을 열면 기존 패널이 닫힌다
  • multiple 모드: 여러 패널을 동시에 연다
  • collapsible single: 열린 패널을 다시 눌러 닫는다
  • content가 trigger와 aria로 연결된다

Related components

opt-ui

FieldToken

Core

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

opt-ui

Facet

Core

Filter by field values while reading their counts and distribution bars. Show top values first and collapse the long tail.

opt-ui

Expression

Core

Read and edit conditions as sentences for alert rules and segment filters that need to be easy to verify.

opt-ui

TextTruncate

Core

Measure text in its actual font and available width to truncate the start, middle, or both ends while preserving the full accessible text.

opt-ui

Highlight

Core

Mark matching search terms with semantic mark elements, matching longer terms first to avoid fragmented overlaps.

opt-ui

LiveRegion

Core

Announce live updates to screen readers with throttled summaries and alternating nodes that can repeat identical messages.

PreviousToggleNextStatCard