Tabs

Tabbed navigation for switching content

Basic Usage

Make changes to your account here. Click save when you're done.

pnpm add @corew500/ui

import { Tabs } from "@corew500/ui/tabs"

<Tabs>Content</Tabs>

Axis	Values	Default
`variant`	defaultlinesmooth	default
`fullWidth`	truefalse	false

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

Get a quick summary of your project status and key metrics.

CMS FieldsEN

Variant

Tabs (3)

This simulates how a content editor manages tabbed content sections in Payload CMS. Each tab can have localized labels and rich text content.

Prop	Type	Default	Description
`value`	any	—	The value of the currently active `Tab`. Use when the component is controlled. When the value is `null`, no Tab will be active.
`defaultValue`	any	`0`	The default value. Use when the component is not controlled. When the value is `null`, no Tab will be active.
`orientation`	enum	`horizontal`	The component orientation (layout flow direction).
`onValueChange`	(value: any, eventDetails: BaseUIChangeEventDetail<"none", { activationDirection: TabsTabActivationDirection; }>) => void	—	Callback invoked when new value is being set.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	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.

- Implements WAI-ARIA Tabs pattern with proper `role="tablist"`, `role="tab"`, and `role="tabpanel"`
Full keyboard navigation: Arrow keys (Left/Right for horizontal, Up/Down for vertical) to move focus between tabs
Home/End keys jump to first/last tab
Enter/Space activates the focused tab
Tab panels are associated with triggers via `aria-controls` and `aria-labelledby`
Focus visible styling with ring indicator for keyboard users
Disabled tabs are properly announced and skipped in keyboard navigation