Tabs

core

탭 패널 시스템. 4-part anatomy: Root, TabList, Tab, TabPanel.

컴포넌트 의존 관계

깊이

100%

기본 사용

개요 콘텐츠입니다.

비활성화 탭

첫 번째 활성화 탭

테스트 커버리지

2026년 2월 4일2/2 통과

2성공

0실패

2전체

탭과 패널을 렌더링한다
탭 클릭으로 패널을 전환한다

TabsRoot Props

Prop	타입	기본값	설명
`defaultSelectedId`	`string`	—	초기 선택된 탭 ID
`selectedId`	`string \| null`	—	제어 모드: 선택된 탭 ID
`setSelectedId`	`(id: string \| null) => void`	—	제어 모드: 탭 변경 핸들러

TabList Props

Prop	타입	기본값	설명
`children`*	`ReactNode`	—	Tab 요소들
`className`	`string`	—	기본 스타일 오버라이드

Tab Props

Prop	타입	기본값	설명
`id`*	`string`	—	탭 고유 ID (TabPanel의 tabId와 매칭)
`children`*	`ReactNode`	—	탭 레이블
`className`	`string`	—	기본 스타일 오버라이드

TabPanel Props

Prop	타입	기본값	설명
`tabId`*	`string`	—	연결된 Tab의 ID
`children`*	`ReactNode`	—	패널 콘텐츠
`className`	`string`	—	기본 스타일 오버라이드

Import

tsx

import {
  TabsRoot,
  TabList,
  Tab,
  TabPanel,
} from "@reopt-ai/opt-ui";

키보드 동작

키	동작
← →	탭 탐색
Home	첫 번째 탭으로 이동
End	마지막 탭으로 이동

Tabs

core

탭 패널 시스템. 4-part anatomy: Root, TabList, Tab, TabPanel.

컴포넌트 의존 관계

깊이

100%

기본 사용

개요 콘텐츠입니다.

비활성화 탭

첫 번째 활성화 탭

테스트 커버리지

2026년 2월 4일2/2 통과

2성공

0실패

2전체

탭과 패널을 렌더링한다
탭 클릭으로 패널을 전환한다

TabsRoot Props

Prop	타입	기본값	설명
`defaultSelectedId`	`string`	—	초기 선택된 탭 ID
`selectedId`	`string \| null`	—	제어 모드: 선택된 탭 ID
`setSelectedId`	`(id: string \| null) => void`	—	제어 모드: 탭 변경 핸들러

TabList Props

Prop	타입	기본값	설명
`children`*	`ReactNode`	—	Tab 요소들
`className`	`string`	—	기본 스타일 오버라이드

Tab Props

Prop	타입	기본값	설명
`id`*	`string`	—	탭 고유 ID (TabPanel의 tabId와 매칭)
`children`*	`ReactNode`	—	탭 레이블
`className`	`string`	—	기본 스타일 오버라이드

TabPanel Props

Prop	타입	기본값	설명
`tabId`*	`string`	—	연결된 Tab의 ID
`children`*	`ReactNode`	—	패널 콘텐츠
`className`	`string`	—	기본 스타일 오버라이드

Import

tsx

import {
  TabsRoot,
  TabList,
  Tab,
  TabPanel,
} from "@reopt-ai/opt-ui";

키보드 동작

키	동작
← →	탭 탐색
Home	첫 번째 탭으로 이동
End	마지막 탭으로 이동