Kaiko UI Kaiko UI

Tabs

Stable

Flexible tabs component for organizing content with multiple variants and styles following DaisyUI design system.

API Reference

c-tabs (container)

Attribute Description Type Default
variant Visual style variant of the tabs string "border"
size Controls the size of tab items string "md"
placement Position of tabs relative to content string "top"

c-tabs.tab

Attribute Description Type Default
active Makes the tab appear active boolean False
disabled Disables the tab interaction boolean False
href Makes the tab a clickable link string ""
type Type of tab element (button or radio) string "button"

c-tabs.content

Attribute Description Type Default
active Shows this panel; all other panels are hidden. Use for server-side active state. boolean False
class Additional classes for the content panel (e.g. bg-base-100 p-6) string ""

variant

box border lift

size

xs sm md lg xl

Accessibility

Radio tabs: use type="radio" with a shared name group for CSS-only content switching. Each tab should have a unique aria-label so screen readers announce the tab purpose when it receives focus.

Link tabs: when using href, the tabs become anchor elements and follow standard link keyboard navigation (Tab + Enter). Ensure the target section has a matching id.

Disabled tabs: disabled tabs render with reduced opacity and are not interactive. Avoid conveying disabled state by colour alone — consider adding explanatory text.

Examples

Usage 


<c-tabs>
  <c-tabs.tab type="radio" name="my_tabs" aria-label="Tab 1">Tab 1</c-tabs.tab>
  <c-tabs.content class="bg-base-100 border-base-300 p-6">Content 1</c-tabs.content>

  <c-tabs.tab type="radio" name="my_tabs" aria-label="Tab 2" checked="checked">Tab 2</c-tabs.tab>
  <c-tabs.content class="bg-base-100 border-base-300 p-6">Content 2</c-tabs.content>
</c-tabs>

Basic Tabs with Content 

<c-tabs variant="box">
  <c-tabs.tab type="radio" name="my_tabs" aria-label="Tab 1">Tab 1</c-tabs.tab>
  <c-tabs.content class="bg-base-100 border-base-300 p-6">Content 1</c-tabs.content>

  <c-tabs.tab type="radio" name="my_tabs" aria-label="Tab 2" checked="checked">Tab 2</c-tabs.tab>
  <c-tabs.content class="bg-base-100 border-base-300 p-6">Content 2</c-tabs.content>

  <c-tabs.tab type="radio" name="my_tabs" aria-label="Tab 3">Tab 3</c-tabs.tab>
  <c-tabs.content class="bg-base-100 border-base-300 p-6">Content 3</c-tabs.content>
</c-tabs>

Variants

box

border

lift 

<c-tabs variant="box">...</c-tabs>
<c-tabs variant="border">...</c-tabs>
<c-tabs variant="lift">...</c-tabs>

Sizes

xs

sm

lg 

<c-tabs size="xs">...</c-tabs>
<c-tabs size="lg">...</c-tabs>

Disabled Tabs 

<c-tabs>
  <c-tabs.tab type="radio" name="my_tabs" checked="checked">Enabled</c-tabs.tab>
  <c-tabs.content class="bg-base-100 border-base-300 p-6">Content</c-tabs.content>

  <c-tabs.tab type="radio" name="my_tabs" disabled="true">Disabled</c-tabs.tab>
  <c-tabs.content class="bg-base-100 border-base-300 p-6">Hidden content</c-tabs.content>
</c-tabs>

Link Tabs

Section 1 Section 2 Section 3 
<c-tabs>
  <c-tabs.tab href="#section1" active="true">Section 1</c-tabs.tab>
  <c-tabs.tab href="#section2">Section 2</c-tabs.tab>
  <c-tabs.tab href="#section3">Section 3</c-tabs.tab>
</c-tabs>