디스클로저 Disclosure

디스클로저는 특정한 정보/컨트롤/섹션에 관련된 부가적인 정보를 표시하거나 숨기는 데 사용되는 요소이다. 디스클로저 하위 콘텐츠 섹션은 기본으로 축소된 상태로 제공되며 사용자가 요청하는 경우에 확장되어 자세한 정보가 표시된다. 이는 사용자의 인지적 부담을 감소시키고 정보를 빠르게 훑어보는 데 도움이 된다.

KRDS 가이드

기본

tsx

import { Disclosure } from '@krds.ui/react'

export default function DisclosureDemo() {
  return <Disclosure buttonText="자세히 보기">신청 처리 결과를 문자로 안내합니다.</Disclosure>
}

Disclosure

Props

이름	타입	기본값	설명
`className`	`string`	-	커스텀 클래스명
`children` (필수)	`ReactNode`	-	확장 가능한 콘텐츠
`onToggle`	`((expanded: boolean) => void)`	-	확장 상태 변경 시 호출되는 콜백
`buttonText` (필수)	`string`	-	토글 버튼 텍스트
`defaultExpanded`	`boolean`	`false`	초기 확장 상태
`expanded`	`boolean`	-	제어된 확장 상태

디스클로저 Disclosure ​

기본 ​

Disclosure ​

Props

디스클로저 Disclosure

기본

Disclosure