Tab

Switch between views or content panels, with generated or custom tabs and keyboard navigation.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Tab to switch content panels or views within the same region. The underline variant matches underlined tabs. Use Segmented when changing only a filter parameter.

items provides unique values and labels. Explicit Button as="item" children replace items.
bind:value synchronizes the current item. A missing or unmatched value causes a visual fallback only; it does not write back. The page renders the panel for the current value.

Import

import { Tab } from '@snowui-design-system/components';

Usage

Variants

Sizes

Vertical

Fill

Composition

API Reference

Property	Type	Default	Example	Description
`value`	`string`	`—`	`value="preview"`	Unique current item value; supports bind:value and updates on click or keyboard activation. Missing or unmatched values visually fall back to the first available item without writing back to the binding.
`variant`	`TabVariant`	`"pill"`	`variant={value}`	Tab appearance variant.
`size`	`TabSize`	`"sm"`	`size={value}`	Controls container padding, radius, and gap and provides the default size to direct Button as="item" children. Item size priority is style > class > Button size > Tab size.
`row`	`boolean`	`false`	`row`	Explicit horizontal arrangement. It stays horizontal when both row and column are false; row wins when both are true.
`column`	`boolean`	`false`	`column`	Vertical arrangement, following Frame syntax.
`fill`	`boolean`	`false`	`fill`	Figma fill width: when the container has an explicit width, distribute horizontal items equally to fill it.
`onChange`	`(value: string) => void`	`—`	`onChange={(value: string) => view = value}`	Called with the new value after the user activates a different item. Activating the current item again does not call it; this callback cannot cancel selection.
`selectionFollowsFocus`	`boolean`	`false`	`selectionFollowsFocus={true}`	Whether arrow keys activate an item immediately. Tab defaults to false (move focus, then Enter activates); Segmented defaults to true.
`role`	`string`	`"tablist"`	`role="tablist"`	ARIA role of the container.
`itemRole`	`string`	`—`	`itemRole="tab"`	ARIA role written to child items. When omitted, Button semantics remain. Tab examples explicitly set tab; radio also synchronizes aria-checked, while other roles synchronize aria-selected.
`children`	`Snippet`	`—`	`<Tab itemRole="tab" value="preview"><Button as="item" value="preview">Preview</Button><Button as="item" value="code">Code</Button></Tab>`	Explicit items with no parameters, using Button as="item" and a unique value. Replaces items; child Props are configured directly.
`items`	`TabItem[]`	`[]`	`items={[{ value: 'preview', label: 'Preview' }, { value: 'code', label: 'Code' }]}`	Generated item data. Each requires a unique value and readable label; an icon component and disabled state are optional. Icons generate Icon plus Text, and disabled items are skipped by keyboard selection. Ignored when children is present.
`parts`	`ComponentPartsOf<{ Button: typeof Button; Icon: typeof Icon; Text: typeof Text; }>`	`—`	`parts={{ Button: { scaleOnHover: false }, Icon: { size: 16 } }}`	Bulk configuration for generated Button, Icon, and Text, such as parts.Button.scaleOnHover. Explicit children do not use this configuration.