KikitaUiDocs

Overview content.

variant

size

orientation

tab 1 label

tab 2 label

tab 3 label

State

invertedcontrolsPanelstab 2 hasError

<kui-tabs [(value)]="activeTab">
  <button kuiTab value="overview">Overview</button>
  <button kuiTab value="settings">Settings</button>
  <button kuiTab value="logs">Logs</button>

  <div kuiTabPanel value="overview">Overview content.</div>
  <div kuiTabPanel value="settings">Settings content.</div>
  <div kuiTabPanel value="logs">Logs content.</div>
</kui-tabs>

Name	Type	Default	Description
variant	`'line' \| 'pill'`	`'line'`	Tab visual style: underline indicator (line) or pill background (pill).
size	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Tab trigger height and font size.
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction of the tab list. Vertical stacks triggers in a column with the indicator on the side edge.
inverted	`boolean`	`false`	Flips the tab edge. Horizontal tabs render panels above and the indicator on top; vertical tabs render panels before the list and the indicator on the start edge.
controlsPanels	`boolean`	`true`	Whether tabs expose aria-controls links to projected kuiTabPanel elements. Set to false when tabs are used as navigation and content is rendered elsewhere, such as a router-outlet.
[(value)]	`string`	`-`	Value of the active tab.
[(selected)]	`string`	`-`	Deprecated alias for value, kept in sync with it. Use value instead; planned for removal in the next major version.
[kuiTab] value	`string`	`-`	Identifier for this tab trigger. Must match a kuiTabPanel value when controlsPanels is true.
[kuiTab] hasError	`boolean`	`false`	Shows a small danger dot next to the tab label without changing the selected state or tab color.
[kuiTab] errorLabel	`string`	`''`	Screen-reader-only text announced alongside the error dot.
[kuiTabPanel] value	`string`	`-`	Identifier matching a [kuiTab] value. Panel is shown when its value matches the tabs value.
--kui-tabs-gap	`CSS length`	`2px`	Gap between tab triggers in the list.
--kui-tabs-border	`CSS color`	`var(--kui-color-border)`	Border color of the tab list edge (bottom for horizontal, side for vertical).
--kui-tabs-panel-gap	`CSS length`	`var(--kui-space-4)`	Gap between the tab list and the active panel.
--kui-tab-height	`CSS length`	`var(--kui-btn-height)`	Tab trigger block size. Overridden per size.
--kui-tab-px	`CSS length`	`var(--kui-btn-px)`	Tab trigger inline padding. Overridden per size.
--kui-tab-indicator	`CSS color`	`var(--kui-color-primary-fill)`	Color of the selected-tab indicator (underline for line, background for pill).
--kui-tab-fg-active	`CSS color`	`var(--kui-color-text)`	Text color of the selected tab.

Inputs verified against @kikita-labs/ui v1.6.1 v1.6.1 public typings.

Tabs — Playground