탭 Tab

탭은 버튼을 눌러 상호배타적인 여러 개의 콘텐츠 섹션을 전환할 수 있는 컴포넌트이다. 탭 버튼 목록과 콘텐츠 패널이 수직으로 쌓여 있는 형태로 표현되며, 사용자는 탭을 선택하여 해당 콘텐츠 섹션을 표시할 수 있다.

KRDS 가이드

기본

import { Tab, TabList, TabPanel, TabTrigger } from '@krds.ui/react'

export default function TabDemo() {
  return (
    <Tab defaultValue="overview">
      <TabList>
        <TabTrigger value="overview">개요</TabTrigger>
        <TabTrigger value="process">절차</TabTrigger>
      </TabList>
      <TabPanel value="overview">개요 내용</TabPanel>
      <TabPanel value="process">절차 내용</TabPanel>
    </Tab>
  )
}

Tab

Props

이름	타입	기본값	설명
value	string	-	활성 탭 값 (제어 모드)
defaultValue	string	-	기본 활성 탭 값 (비제어 모드)
onValueChange	((value: string) => void)	-	탭 변경 콜백
variant	TabVariant	line	탭 변형 ('line' | 'fill')
size	TabSize	full	탭 크기 ('normal' | 'full')
children (필수)	ReactNode	-	자식 컴포넌트
className	string	-	커스텀 클래스명

TabList

Props

이름	타입	기본값	설명
children	ReactNode	-	자식 컴포넌트 (TabTrigger들)
className	string	-	커스텀 클래스명

TabTrigger

Props

이름	타입	기본값	설명
value (필수)	string	-	탭 식별자
children (필수)	ReactNode	-	자식 컴포넌트
className	string	-	커스텀 클래스명

TabPanel

Props

이름	타입	기본값	설명
value (필수)	string	-	탭 식별자
children (필수)	ReactNode	-	자식 컴포넌트
className	string	-	커스텀 클래스명