XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Tabs

Previous: TableNext: Text

Switches between panels of content, one visible at a time.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import {2  Tabs,3  TabsList,4  TabsPanel,5  TabsTab6} from "xiod-ui/tabs";

Anatomy

1<Tabs>2  <TabsList>3    <TabsTab />4  </TabsList>5  <TabsPanel />6</Tabs>

API Reference

Detailed documentation of properties and options.

Tabs

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
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: any, eventDetails: TabsRootChangeEventDetails) => void)
–

Callback invoked when new value is being set.

The event reason is 'none' for user-initiated changes, such as a click or keyboard navigation;

TabsList

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
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.

loopFocus
boolean

TabsPanel

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
valueReq
any
–

The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.

keepMounted
boolean

TabsTab

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
valueReq
any
–

The value of the Tab.

disabled
boolean
–
TableText
'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
"horizontal"|"vertical"
'horizontal'

The component orientation (layout flow direction).

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.

true

Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.

variant
"default"|"underline"
default

The visual style of the component.

false

Whether to keep the HTML element in the DOM while the panel is hidden.

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>).