Tabs

Tabs are a great way to simplify complex user interfaces by showing only groups of elements when required.

To create a tabbed view, wrap all the components in a <TabView> component.

Preview

Code

<TabView name='Billing' labels={['Plan', 'Card Details']}>
  <Card className={ props.className }/>
  <Card className={ props.className }/>
</TabView

You must pass the name prop in order for the state to be saved across view changes. You must also pass the className prop down to any direct children.

Props

Prop	Description	Required	Value
initialView	set the initial tab index	optional	integer (default: 0)
labels	list of tab labels	required	array
name	unique name for the tab view	optional	string