Capítulo 42 de 51
Standard single-panel-visible-at-a-time tabs with a separate Indicator part for an animated "active tab" highlight bar that tracks the selected Tab's position/size automatically.
Root → List → Tab (repeated), Indicator; Panel (repeated, one per Tab.value).Indicator: a dedicated part (not just styling the active Tab) meant to be positioned via CSS using values it tracks internally — typically animated with a transform/width transition as the active tab changes. renderBeforeHydration avoids a flash-of-unpositioned-indicator on SSR before JS hydrates.activateOnFocus (on List): whether moving focus to a tab (via arrow keys) also activates its panel immediately, vs. requiring a separate activation (Enter/Space) — the classic "automatic vs. manual" tab activation choice from the WAI-ARIA APG.Panel.keepMounted: keep inactive panels in the DOM (hidden) instead of unmounting — useful for panels with expensive-to-recreate state (forms, iframes) or scroll-position preservation.data-activation-direction: present on Root/List/Panel/Indicator/Tab, indicating which direction the newly active tab is relative to the previous one — drives directional slide transitions.| Part | Notable props | Notable data attributes |
|---|---|---|
Root | value/defaultValue/onValueChange, orientation | data-orientation, data-activation-direction |
List | activateOnFocus, loopFocus | same as Root |
Tab | value (required), nativeButton, disabled | data-active, data-disabled, plus orientation/direction attrs |
Panel | value (required), keepMounted | data-hidden, data-index, data-starting-style/data-ending-style |
Indicator | renderBeforeHydration | orientation/direction attrs |
activateOnFocus deliberately: true (automatic activation, default APG pattern) suits lightweight content-swap tabs; false (manual) suits tabs whose panels are expensive to render/fetch, so arrow-key browsing doesn't trigger unwanted loads.Indicator instead of hand-computing an active-tab underline's position — it's built to track the active Tab's geometry for you.keepMounted on Panel for any tab containing form state, video/iframe embeds, or scroll position that shouldn't reset when switching away and back.data-starting-style/data-ending-style on Panel for panel-switch transitions; data-activation-direction for directional variants.