Version: 3.0.0-next.37

Tabs

Tabs are used to communicate a state that affects a system, feature or page.

Import#

NativeBase exports 5 modal-related components:

  • Tabs: Provides context and state for all components
  • Tabs.Bar: Wrapper for theĀ TabĀ components
  • Tabs.Tab: element that serves as a label for one of the tab view and can be activated to display that panel.
  • Tabs.Views: Wrapper for theĀ Tabs.ViewĀ components
  • Tabs.View: element that contains the content associated with a tab
import { Tabs } from 'native-base';

Examples#

Usage#

Composition#

Variant#

TabsAlignment#

Colors#

Sizes#

FittedTabs#

TabBarOnly#

Props#

Tabs implements Box, so all the Box Props can be passed to it.

Tabs#

NameTypeDescriptionDefault
aligncenter, end, startThe alignments of the tab.start
colorSchemestringThe color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red").-
defaultIndexnumberThe index of the open tab.-
indexnumberIf given, update the default open tab.0
sizelg, md, smThe size of the tab.md
isFittedbooleanThe tabs will spread in the TabBar.-
onChangefunctionThe callback invoked when tab is changed.-
variantenclosed, enclosed-colored, line, soft-rounded, solid-box, solid-roundedThe variant of the tabs style to use.line

Tabs.Bar, Tabs.Tab, Tabs.Views, Tabs.View all implement Box, all the props of Box can be passed to it.

Accessibility#

Keyboard#

  • ArrowRight Moves focus to the next tab
  • ArrowLeft Moves focus to the previous tab
  • Tab When focus moves into the tab list, places focus on the active tab element
  • Home Moves focus to the first tab
  • End Moves focus to the last tab

ARIA roles#

  • Tab has role set to tab
  • aria-selected is set to true when a tab is selected and all other Tabs have it set to false
  • aria-controls is set to the tabpanel's id
  • Tablist has role set to tablist
  • TabPanel has role set to tabpanel
  • aria-labelledby is set to the id of the Tab that labels the TabPanel