Tabs
React componentSwitch between related content panels in the same view.
Try it out
Use the live controls or open the Code tab to view and copy the example.
API reference
Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.
| Prop | Type | Description |
|---|---|---|
labelRequired | string | A meaningful visible or accessible label. |
itemsRequired | readonly TabItem[] | Menu actions with stable ids and optional groups. |
value | string | undefined | Controlled value. Pair with its change callback. |
defaultValue | string | undefined | Initial value for uncontrolled usage. |
onValueChange | ((value: string) => void) | undefined | Called with the next value. Update controlled state here. |
defaultChecked | boolean | undefined | Standard React / HTML attribute passed to the underlying element. |
className | string | undefined | Additional CSS class names. |
id | string | undefined | Standard React / HTML attribute passed to the underlying element. |
style | CSSProperties | undefined | Inline styles, including CSS custom property overrides. |
rel | string | undefined | Standard React / HTML attribute passed to the underlying element. |
children | ReactNode | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLDivElement> | undefined | Standard React / HTML attribute passed to the underlying element. |
onBlur | FocusEventHandler<HTMLDivElement> | undefined | Standard React / HTML attribute passed to the underlying element. |
onError | ReactEventHandler<HTMLDivElement> | undefined | Standard React / HTML attribute passed to the underlying element. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | Standard React / HTML attribute passed to the underlying element. |
Accessibility & interaction
Label the tab list. Left and Right Arrow, Home, and End move focus and select a tab. Disabled tabs are skipped.
Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.
Variants & implementation notes
Supply items with unique values, labels, and panel content. Use defaultValue for an initial selection, or pair value with onValueChange to control it.
Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.