03 · Components · 탐색
탭Tabs
동일 계층의 콘텐츠를 바꿔가며 보여줍니다. 한 화면에 너무 많은 정보가 들어갈 때 탭으로 분리하세요.
StableWCAG AA
기본
tsx
<Tabs items={[
{ value: "overview", label: "개요", content: <p>...</p> },
{ value: "guide", label: "가이드", content: <p>...</p> },
{ value: "faq", label: "FAQ", content: <p>...</p> },
]} />미리보기
주님의교회 PCL은 교회 성도와 방문자를 위한 한국어 UX 기반 디자인 시스템입니다.
WAI-ARIA 탭 패턴을 따릅니다. role="tablist", role="tab", role="tabpanel"이 연결되며 선택된 탭에 aria-selected, 비선택 탭에 는 tabIndex=-1이 부여되어 Tab으로는 한 번에 한 탭만 진입하고 좌우 방향키로 이동합니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
items | { value, label, content, disabled? }[] | 탭 목록. content에는 패널에 표시할 ReactNode. | |
defaultValue | string | 초기 선택 값 (비제어). | |
value / onChange | string / (v: string) => void | 제어 모드에서 현재 값과 변경 콜백. |