Tabs

한 영역에 여러 내용을 두고 한 번에 하나만 보여 줘요. 한 대상을 여러 부분으로 나눠 보여 줄 때, 입력 방식이 나뉠 때 써요. 두 내용을 함께 보며 비교해야 하면 Accordion을 써요.

사용 예시

한 대상을 나눠 보이기

화살표 키로 탭에 포커스를 옮기고 Enter나 Space를 누르면 그 탭이 열려요.

구성원 4명이 함께 쓰고 있어요.

tsx

<Tabs defaultValue="overview">  <TabsList>    <TabsTrigger value="overview">개요</TabsTrigger>    <TabsTrigger value="activity">활동 기록</TabsTrigger>    <TabsTrigger value="settings">설정</TabsTrigger>  </TabsList>  <TabsContent value="overview">    <p className="text-prose">구성원 4명이 함께 쓰고 있어요.</p>  </TabsContent>  <TabsContent value="activity">    <p className="text-prose">오늘 오후 3시에 이름이 바뀌었어요.</p>  </TabsContent>  <TabsContent value="settings">    <p className="text-prose">이름과 공개 범위를 바꿔요.</p>  </TabsContent></Tabs>

가을 개편이 시작됐어요.

권장

이름이 짧아서 탭끼리 다른 점을 바로 알 수 있어요.

가을 개편이 시작됐어요.

지양

같은 말이 되풀이되면 다른 부분을 찾아 읽어야 해요.

넘치는 탭

탭이 영역보다 넓으면 가로로 스크롤돼요. 탭이 두 줄로 나뉘지 않아서 아래 내용의 위치가 바뀌지 않아요.

지난 7일 동안 글 6개가 올라왔어요.

tsx

<Tabs defaultValue="overview" className="max-w-72">  <TabsList>    <TabsTrigger value="overview">개요</TabsTrigger>    <TabsTrigger value="activity">활동 기록</TabsTrigger>    <TabsTrigger value="members">구성원</TabsTrigger>    <TabsTrigger value="files">파일</TabsTrigger>    <TabsTrigger value="alerts">알림</TabsTrigger>    <TabsTrigger value="settings">설정</TabsTrigger>  </TabsList>  <TabsContent value="overview">    <p className="text-prose">지난 7일 동안 글 6개가 올라왔어요.</p>  </TabsContent></Tabs>

나뉘는 입력 방식

탭을 바꾸면 안에 있던 내용이 사라졌다가 다시 만들어져요. 안에 있는 컨트롤의 값은 Tabs 바깥의 상태로 관리해요.

tsx

<Tabs defaultValue="text">  <TabsList>    <TabsTrigger value="text">글</TabsTrigger>    <TabsTrigger value="photo">사진</TabsTrigger>  </TabsList>  <TabsContent value="text">    <Textarea value={note} onChange={e => setNote(e.target.value)} placeholder="오늘 한 일을 입력하세요" />  </TabsContent>  <TabsContent value="photo">    <Button color="neutral" emphasis="outline">      <Image />      사진 고르기    </Button>  </TabsContent></Tabs>

권장

한 글을 2가지 방식으로 보여 줘요. 탭을 바꿔도 보고 있는 글은 같아요.

가을 개편, 사진 정리

지양

서로 다른 페이지를 탭으로 모으지 않아요. 탭을 눌러도 주소가 그대로라서 한 탭만 따로 열 수 없어요. 다른 페이지로 이동할 때는 링크를 써요.

탭 이름 옆 개수

열기 전에 탭마다 개수를 보여 줄 때 써요.

가을 개편, 사진 정리, 주간 회고

tsx

<Tabs defaultValue="active">  <TabsList>    <TabsTrigger value="active">      진행 중      <Badge>3</Badge>    </TabsTrigger>    <TabsTrigger value="review">      확인 필요      <Badge color="warning">2</Badge>    </TabsTrigger>  </TabsList>  <TabsContent value="active">    <p className="text-prose">가을 개편, 사진 정리, 주간 회고</p>  </TabsContent>  <TabsContent value="review">    <p className="text-prose">지난달 회고, 연말 계획</p>  </TabsContent></Tabs>

비활성 탭

권한이 없어서 지금 열 수 없는 탭에 써요.

구성원 4명이 함께 쓰고 있어요.

tsx

<Tabs defaultValue="overview">  <TabsList>    <TabsTrigger value="overview">개요</TabsTrigger>    <TabsTrigger value="activity">활동 기록</TabsTrigger>    <TabsTrigger value="settings" disabled>설정</TabsTrigger>  </TabsList>  <TabsContent value="overview">    <p className="text-prose">구성원 4명이 함께 쓰고 있어요.</p>  </TabsContent>  <TabsContent value="activity">    <p className="text-prose">오늘 오후 3시에 이름이 바뀌었어요.</p>  </TabsContent></Tabs>

구성원 4명이 함께 쓰고 있어요.

권장

비활성 탭도 보여서 어떤 탭이 있는지 알 수 있어요.

구성원 4명이 함께 쓰고 있어요.

지양

탭을 숨기면 그 탭이 있는지도 알 수 없어요.

호출하는 쪽에서 탭 바꾸기

탭 말고 다른 버튼으로도 탭을 바꿔야 할 때 써요.

이름과 공개 범위를 바꿔요.

tsx

<Button color="brand" emphasis="solid" onClick={() => setTab('activity')}>설정 저장</Button><Tabs value={tab} onValueChange={setTab}>  <TabsList>    <TabsTrigger value="settings">설정</TabsTrigger>    <TabsTrigger value="activity">활동 기록</TabsTrigger>  </TabsList>  <TabsContent value="settings">    <p className="text-prose">이름과 공개 범위를 바꿔요.</p>  </TabsContent>  <TabsContent value="activity">    <p className="text-prose">오늘 오후 3시에 설정이 바뀌었어요.</p>  </TabsContent></Tabs>

명세

이름
이름	값	기본
Tabs
value	string	-
호출하는 쪽에서 열린 탭을 관리해요.
defaultValue	string	-
처음 값이에요. value도 없으면 첫 탭이 열려요.
onValueChange	(value: string, eventDetails) => void	-
열린 탭이 바뀌면 호출돼요.
className	string	-
모든 하위 컴포넌트에 쓸 수 있어요.
TabsTrigger
value	string	필수
이 탭이 열리면 Tabs의 value가 이 값이 돼요.
disabled	boolean	false
TabsContent
value	string	필수
Tabs의 value가 이 값일 때 보여요.
keepMounted	boolean	false
닫힌 탭의 내용도 렌더하고 숨겨요. 정적 HTML에도 포함돼요.