Tabs

Named tab panels with stable identities, retained drafts, and scoped keyboard navigation.@gemologic/sheen · navigation

Playground

This example has no scalar controls. Its validated source remains interactive below.

general name

<Tabs label="Settings" items={[{ value: "general", label: "General" }, { value: "advanced", label: "Advanced" }]}>{value => <Input label={`${value} name`} />}</Tabs>

Variant matrix

Settings panels

general name

Anatomy

Package

@gemologic/sheen

Source

packages/ui/src/primitives/Tabs.tsx

Tokens

--sheen-color-fg
--sheen-color-border
--sheen-color-focus-ring

Accessibility

Role: tablist, tab, tabpanelKeyboard: Tab, Shift+Tab, ArrowLeft, ArrowRight, ArrowUp, ArrowDown, Home, End, Enter, Space

Do

Keep values stable during refresh.
Use manual activation when selection starts expensive work.

Do not

Do not use tabs as a substitute for URL navigation.
Do not assume inactive panels stop effects or native form submission.

Generated props

Name	Type	Default	Description
`label` *	`string`	—	Required accessible name for the tab list.
`items` *	`readonly TabOption[]`	—	Ordered tabs with stable unique values, labels, and optional disabled state.
`value`	`string`	—	Controlled selected value.
`defaultValue`	`string`	—	Initial uncontrolled value; defaults to the first enabled tab.
`onValueChange`	`(value: string) => void`	—	Requests selection; controlled owners may reject it.
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	Tab list layout and arrow-key axis.
`activationMode`	`"automatic" \| "manual"`	`automatic`	Automatic selects on arrow navigation; manual requires Enter or Space.
`children` *	`(value: string) => JSX.Element`	—	Panel renderer, mounted once per stable item value and retained while inactive.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.