Primitivenavigation

Tabs

Stable

Uma superfície visível por vez, escolhida numa linha de irmãs. `default` é uma faixa segmentada e lê como controle; `underline` lê como navegação.

Instalação

npx up-web-ds add tabs

Preview

Default

O primitive canônico de abas, com uma superfície visível por vez.

Underline

Itens classificados por arquitetura e por domínio.

Sizes

Controlled

Aba ativa: visao

Disabled

Conteúdo acessível.

Vertical

Painel do primeiro item.

All states

Default

O primitive canônico de abas, com uma superfície visível por vez.

Underline

Itens classificados por arquitetura e por domínio.

Sizes

Controlled

Aba ativa: visao

Disabled

Conteúdo acessível.

Vertical

Painel do primeiro item.

Usage

@/components/ui/tabs

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/components/ui/tabs'

Tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<Tabs defaultValue="visao">
  <TabsList>
    <TabsTrigger value="visao">Visão geral</TabsTrigger>
    <TabsTrigger value="props">Props</TabsTrigger>
    <TabsTrigger value="uso">Uso</TabsTrigger>
  </TabsList>
  <TabsContent value="visao" className={panel}>
    O primitive canônico de abas, com uma superfície visível por vez.
  </TabsContent>
  <TabsContent value="props" className={panel}>
    A API pública vem do Base UI e é derivada do TypeScript.
  </TabsContent>
  <TabsContent value="uso" className={panel}>
    Composição declarada, nunca inferida por quantidade de exports.
  </TabsContent>
</Tabs>

Props

Tabs

Props de Tabs
Prop	Type	Default	Description
className	`string \| ((state: TabsRootState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
defaultValue	`any`	`0`	The default value. Use when the component is not controlled. When the value is `null`, no Tab will be active.
onValueChange	`((value: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) => void)`	sem valor padrão	Callback invoked when new value is being set. The event `reason` is `'none'` for user-initiated changes, such as a click or keyboard navigation; `'initial'` for the first automatic selection or fallback in uncontrolled roots when `defaultValue` is omitted or `undefined`, including when the implicit initial value is disabled or missing; `'disabled'` for automatic fallback when the selected tab becomes disabled in uncontrolled roots; or `'missing'` for automatic fallback when the selected tab is removed, or when an explicit `defaultValue` never matches a mounted tab in uncontrolled roots. For automatic changes, the selected value can be `null` when no enabled Tab is available as a fallback. Automatic changes cannot be canceled; calling `eventDetails.cancel()` for `'initial'`, `'disabled'`, or `'missing'` has no effect.
orientation	`BaseOrientation`	`'horizontal'`	The component orientation (layout flow direction).
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsRootState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: TabsRootState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.
value	`any`	sem valor padrão	The value of the currently active `Tab`. Use when the component is controlled. When the value is `null`, no Tab will be active.

Estende TabsPrimitive.Root.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

TabsList

Props de TabsList
Prop	Type	Default	Description
size	`SegmentedControlSize`	`'default'`
variant	`TabsVariant`	`'default'`
activateOnFocus	`boolean`	`false`	Whether to automatically change the active tab on arrow key focus. Otherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press.
className	`string \| ((state: TabsListState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
loopFocus	`boolean`	`true`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsListState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: TabsListState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende TabsPrimitive.List.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

TabsTab

Props de TabsTab
Prop	Type	Default	Description
size	`SegmentedControlSize`	sem valor padrão
value, obrigatória	`any`	sem valor padrão	The value of the Tab.
className	`string \| ((state: TabsTabState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
disabled	`boolean`	sem valor padrão	Whether the Tab is disabled. If a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected. Instead, the next enabled Tab will be selected. However, it does not work like this during server-side rendering, as it is not known during pre-rendering which Tabs are disabled. To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsTabState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: TabsTabState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende TabsPrimitive.Tab.Props. Aceita também os atributos padrão de um elemento React (283 não listados).

TabsTrigger

Props de TabsTrigger
Prop	Type	Default	Description
size	`SegmentedControlSize`	sem valor padrão
value, obrigatória	`any`	sem valor padrão	The value of the Tab.
className	`string \| ((state: TabsTabState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
disabled	`boolean`	sem valor padrão	Whether the Tab is disabled. If a first Tab on a `<Tabs.List>` is disabled, it won't initially be selected. Instead, the next enabled Tab will be selected. However, it does not work like this during server-side rendering, as it is not known during pre-rendering which Tabs are disabled. To work around it, ensure that `defaultValue` or `value` on `<Tabs.Root>` is set to an enabled Tab's value.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsTabState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: TabsTabState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende TabsPrimitive.Tab.Props. Aceita também os atributos padrão de um elemento React (283 não listados).

TabsPanel

Props de TabsPanel
Prop	Type	Default	Description
value, obrigatória	`any`	sem valor padrão	The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
className	`string \| ((state: TabsPanelState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
keepMounted	`boolean`	`false`	Whether to keep the HTML element in the DOM while the panel is hidden.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsPanelState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: TabsPanelState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende TabsPrimitive.Panel.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

TabsContent

Props de TabsContent
Prop	Type	Default	Description
value, obrigatória	`any`	sem valor padrão	The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
className	`string \| ((state: TabsPanelState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
keepMounted	`boolean`	`false`	Whether to keep the HTML element in the DOM while the panel is hidden.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, TabsPanelState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: TabsPanelState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende TabsPrimitive.Panel.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

prop obrigatória.

Composition

Os gatilhos ficam agrupados na TabsList; cada painel é irmão dela, e não filho — é o `value` que liga um ao outro.

Composição de Tabs

Tabs

TabsList
- TabsTrigger
TabsContent

Metadata

Notas de acessibilidade

Teclado e leitor de tela verificados por teste: a linha é um tablist com uma única aba selecionada, cada aba aponta para o painel por aria-controls, e aria-selected acompanha o estado real. O foco é roving — Tab entra na linha uma vez, na aba ativa, e as setas percorrem as demais com wrap; pôr todas na sequência de tabulação custaria uma parada por aba. O anel de foco é visível e verificado em navegador: o `outline-none` da origem envenenava --tw-outline-style no Tailwind v4, e o anel recebia largura e cor mas ficava invisível. Uma aba desabilitada permanece na linha, anunciada como desabilitada, e apenas recusa a seleção: uma aba que sumisse renumeraria "aba 2 de 3" para quem ouve. O painel inativo é desmontado, não escondido. Touch verificado em viewport de 375px com emulação de toque: as abas ficam acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8 nos três tamanhos, e o toque seleciona. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — o indicador é o estado, então o tween sai (transition-property: none) e o destino permanece: ele continua chegando sob a aba ativa. Gatear a viagem inteira deixaria o marcador sob a aba antiga.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: navigation
Status: Stable

Origem e distribuição

Fonte: coss registry / tabs
Licença: MIT
URL: https://coss.com/ui/r/tabs.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: Nenhuma
Ícones: Nenhum
Construído sobre: Segmented Control
Usado por: Nenhum ainda