탭

탭은 버튼을 눌러 상호배타적인 여러 개의 콘텐츠 섹션을 전환할 수 있는 컴포넌트이다.

사용 지침

한 페이지에서 동일 주제를 여러 관점(개요·신청·통계 등)으로 나눌 때 사용하고, 화살표 키 이동·role="tablist" 등 WAI-ARIA 탭 패턴을 준수합니다.

예제

Default

탭 1 영역

examples/tab/TabDefault.tsx

import { Tab, TabList, TabTrigger, TabContent, TabPanel } from "@/components/ui/dynamic/tab"

export default function TabDefault() {

Fill 타입

홈 페이지 내용입니다.

examples/tab/TabFillType.tsx

import { Tab, TabList, TabTrigger, TabContent, TabPanel } from "@/components/ui/dynamic/tab"

export default function TabFillType() {

Fill 타입 (풀사이즈)

홈 페이지 내용입니다.

examples/tab/TabFillTypeFull.tsx

import { Tab, TabList, TabTrigger, TabContent, TabPanel } from "@/components/ui/dynamic/tab"

export default function TabFillTypeFull() {

Line 타입

프로젝트 개요

이 프로젝트는 KRDS 디자인 시스템을 구현한 React 컴포넌트 라이브러리입니다.

examples/tab/TabLineType.tsx

import { Tab, TabList, TabTrigger, TabContent, TabPanel } from "@/components/ui/dynamic/tab"

export default function TabLineType() {

Line 타입 (풀사이즈)

대시보드 내용

examples/tab/TabLineTypeFull.tsx

import { Tab, TabList, TabTrigger, TabContent, TabPanel } from "@/components/ui/dynamic/tab"

export default function TabLineTypeFull() {

제어 모드

현재 선택된 탭: overview

개요 탭의 콘텐츠입니다. 상위에서 value/onValueChange 로 제어됩니다.

examples/tab/TabControlled.tsx

"use client"

import { useState } from "react"

비제어 모드

전체 카테고리의 서비스 목록이 표시됩니다.

examples/tab/TabUncontrolled.tsx

import { Tab, TabList, TabTrigger, TabContent, TabPanel } from "@/components/ui/dynamic/tab"

const CATEGORIES = [

비활성 탭 포함

탭 1 영역

examples/tab/TabWithDisabledTabs.tsx

import { Tab, TabList, TabTrigger, TabContent, TabPanel } from "@/components/ui/dynamic/tab"

export default function TabWithDisabledTabs() {

풍부한 콘텐츠

신청에 필요한 서류 목록을 안내합니다.

examples/tab/TabWithRichContent.tsx

import { Tab, TabList, TabTrigger, TabContent, TabPanel } from "@/components/ui/dynamic/tab"
import { FileTextIcon, HelpCircleIcon, BookOpenIcon } from "lucide-react"

Compound Pattern 예제

신청서 정보를 입력합니다.

examples/tab/TabCompoundPatternExample.tsx

"use client"

import * as React from "react"

키보드 내비게이션

키보드: 탭 포커스 후 ← → 방향키로 탭 이동, Enter/Space로 선택

탭 1 영역

examples/tab/TabKeyboardNavigation.tsx

import { Tab, TabList, TabTrigger, TabContent, TabPanel } from "@/components/ui/dynamic/tab"

export default function TabKeyboardNavigation() {

속성

이름	타입	기본값	설명
className	string	—	—
defaultValue	string	—	—
onValueChange	((value: string) => void)	—	—
type	enum	primary	—
value	string	—	—
variant	enum	line	—

캐러셀 표