Navigation and interaction

Tabs

Automatic or manual tab activation.

Live example

A shared semantic class contract.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Tabs } from "@cofob/design-system-react";

/**
 * Complete Tabs parameter reference.
 * @param items/tabs
 *   type: ReactTabItem[] (React) | TabItem[] (Svelte)
 *   required
 *   example: {items}
 * @param value/defaultValue
 *   type: string or string[]; controlled or initial value
 *   default: —
 *   example: "overview"
 * @param onValueChange
 *   type: (value: string | readonly string[]) => void
 *   default: —
 *   example: {handleValueChange}
 * @param orientation
 *   type: "horizontal" | "vertical"
 *   default: "horizontal"
 *   example: "horizontal"
 * @param activation/activationMode
 *   type: "automatic" | "manual"
 *   default: "automatic"
 *   example: "manual"
 * @param label
 *   type: string | renderable content
 *   default: "Tabs"
 *   example: "Accessible label"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param div attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function TabsExample() {
  return (
    <Tabs items={items} />
  );
}

Svelte

<script lang="ts">
  import { Tabs } from "@cofob/design-system-svelte";

  // Complete Tabs parameter reference.
  // items/tabs
  //   type: ReactTabItem[] (React) | TabItem[] (Svelte)
  //   required
  //   example: {items}
  // value/defaultValue
  //   type: string or string[]; controlled or initial value
  //   default: —
  //   example: "overview"
  // onValueChange
  //   type: (value: string | readonly string[]) => void
  //   default: —
  //   example: {handleValueChange}
  // orientation
  //   type: "horizontal" | "vertical"
  //   default: "horizontal"
  //   example: "horizontal"
  // activation/activationMode
  //   type: "automatic" | "manual"
  //   default: "automatic"
  //   example: "manual"
  // label
  //   type: string | renderable content
  //   default: "Tabs"
  //   example: "Accessible label"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // div attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Tabs items={items} />

HTML

<!--
  Complete Tabs parameter reference.
  items/tabs
    type: ReactTabItem[] (React) | TabItem[] (Svelte)
    required
    example: {items}
  value/defaultValue
    type: string or string[]; controlled or initial value
    default: —
    example: "overview"
  onValueChange
    type: (value: string | readonly string[]) => void
    default: —
    example: {handleValueChange}
  orientation
    type: "horizontal" | "vertical"
    default: "horizontal"
    example: "horizontal"
  activation/activationMode
    type: "automatic" | "manual"
    default: "automatic"
    example: "manual"
  label
    type: string | renderable content
    default: "Tabs"
    example: "Accessible label"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  div attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<div class="cf-tabs" data-cf-tabs>…</div>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-tabs`
Adapters	Native · React · Svelte
Primary props	items/tabs · value/defaultValue · onValueChange · orientation · activation/activationMode · label · children · div attributes
Documented states	active · inactive · disabled · automatic/manual
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`items/tabs`required	`ReactTabItem[] (React) \| TabItem[] (Svelte)`	`required`	React · Svelte · HTML	`{items}`	Ordered tab records; content is ReactNode or a Svelte string/snippet.
`value/defaultValue`	`string or string[]; controlled or initial value`	`—`	React · Svelte · HTML	`"overview"`	Use the first form for controlled state and the second for initial state.
`onValueChange`	`(value: string \| readonly string[]) => void`	`—`	React · Svelte · HTML	`{handleValueChange}`	Reports a user-driven tab or accordion value change.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	React · Svelte · HTML	`"horizontal"`	Sets layout and the matching keyboard navigation axis or ARIA orientation.
`activation/activationMode`	`"automatic" \| "manual"`	`"automatic"`	React · Svelte · HTML	`"manual"`	Chooses arrow-key activation or manual Enter/Space activation.
`label`	`string \| renderable content`	`"Tabs"`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`div attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.