Tabs

OverviewAnalyticsReportsSettings

12 active projects

Views up 25%

5 reports ready

Notifications and security

계약

Overview

Machine-readable contract from Component Spec.

component: tabsexport: Tabsversion: 1tokens.visual: tabsattributes: data-refineui=tabs

Anatomy

Part	data-refineui
root	tabs
tab	tab
indicator	tabs-indicator
list	tabs-list

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir, prefers-contrast

Accessibility

Slot	Element	Role	Required attributes
tabs-list	div	tablist	—
tab	button	tab	aria-selected: required=true, type: boolean; aria-controls: required=true, type: string

Keyboard

Key	Action	Native
ArrowRight	next-trigger	—
ArrowDown	next-trigger	—
ArrowLeft	previous-trigger	—
ArrowUp	previous-trigger	—
Home	first-trigger	—
End	last-trigger	—
Enter	activate	true
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible
behavior	roving	true

Layout

Property	Value
direction	logical
rtl	true

토큰

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

OverviewSpecsActivity

Overview panel

Specs panel

Activity panel

Recipe → Tokens

Slot bindings for variant="selected" — declared in tabs (style → tokens).

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
list	—	border	tabs.listLine	borderDefault	neutral300	neutral650	after:bg-refineui-alias-border-default
indicator	—	background	tabs.selectedLine	backgroundBrand	primaryBlack	primaryGray	bg-refineui-alias-background-brand
trigger	—	foreground	tabs.itemForeground	foregroundTertiary	neutral500	neutral450	text-refineui-alias-foreground-tertiary
trigger	selected	foreground	tabs.selectedForeground	foregroundPrimary	primaryBlack	neutralWhite	text-refineui-alias-foreground-primary

Component token trace

All paths in token-trace-v2.json prefixed with tabs.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
tabs.hoverForeground	foregroundPrimaryHover	neutralBlack	neutral100	#000000	#F5F5F5
tabs.itemDisabledForeground	foregroundDisabled	neutral400	neutral600	#CECECE	#6C6C6C
tabs.itemForeground	foregroundTertiary	neutral500	neutral450	#A4A4A4	#BBBBBB
tabs.listLine	borderDefault	neutral300	neutral650	#DBDBDB	#5B5B5B
tabs.selectedForeground	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
tabs.selectedLine	backgroundBrand	primaryBlack	primaryGray	#212121	#D4D4D4

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@refineui/react";

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="analytics">Analytics</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">
    <p>Overview content</p>
  </TabsContent>
  <TabsContent value="analytics">
    <p>Analytics content</p>
  </TabsContent>
  <TabsContent value="settings">
    <p>Settings content</p>
  </TabsContent>
</Tabs>

<Tabs value={activeTab} onValueChange={setActiveTab}>
  {/* Controlled tabs */}
</Tabs>

API 레퍼런스

Tabs

Prop	Default	Type	Description
value	—	string	제어형 활성 탭 값.
defaultValue	—	string	비제어형 초기 활성 탭.
onValueChange	—	(value: string) => void	활성 탭 변경 시 이벤트 핸들러.

TabsList

탭 트리거 컨테이너.

TabsTrigger

Prop	Default	Type	Description
value	—	string	탭 식별자(필수).
disabled	false	boolean	이 탭을 비활성화합니다.

TabsContent

Prop	Default	Type	Description
value	—	string	연결된 탭 값(필수).