KRDS React

아코디언 Accordion ​

아코디언은 한 페이지에서 관련 있는 여러 콘텐츠 섹션을 확인할 수 있도록 하는 컴포넌트로 콘텐츠 섹션의 헤더 목록이 수직으로 쌓여 있는 형태로 표현된다. 일반적으로 헤더 목록은 컨트롤 요소로 활용되며 사용자는 필요에 따라 헤더를 선택하여 하위 콘텐츠 섹션을 표시하거나 숨길 수 있다.

KRDS 가이드

기본 ​

tsx
import { Accordion } from '@krds.ui/react'

export default function AccordionDemo() {
  return (
    <Accordion defaultValue={['eligibility']}>
      <Accordion.Item value="eligibility">
        <Accordion.Header>신청 자격</Accordion.Header>
        <Accordion.Panel>만 19세 이상 국민</Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item value="method">
        <Accordion.Header>신청 방법</Accordion.Header>
        <Accordion.Panel>온라인 또는 방문</Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  )
}

Accordion ​

Props

이름타입기본값설명
variantAccordionVariantdefault아코디언 스타일 변형
allowMultiplebooleantrue다중 선택 허용 여부 (false일 경우 한 번에 하나만 열림)
valuestring[]-열린 아이템 값 배열 (제어 상태)
onChange((values: string[]) => void)-열린 아이템 변경 핸들러
defaultValuestring[][]초기 열린 아이템 값 배열 (비제어 상태)
children (필수)ReactNode-자식 컴포넌트들

AccordionItem ​

Props

이름타입기본값설명
value (필수)string-아이템 값 (고유 식별자)
children (필수)ReactNode-자식 컴포넌트들 (Header와 Panel)