Skip to main content

Tabs

Navigation

Tabs

Scrollable and fixed tabs with indicator animation.

Usage

Switch between peer screens or data sets without leaving context.

Highlights

  • Tab items + TabPanel helpers
  • Keyboard accessible roving focus

When to use it

  • Content is organized by categories at the same hierarchy.
  • You need to keep context while swapping datasets.

Related components

NavigationStackAppbar

Examples​

Default​

Preview (Web)
import { Tabs } from 'react-native-molecules/components/Tabs';

export default function Example() {
  return (
      <Tabs defaultValue="trips">
          <Tabs.Item name="flight" accessibilityLabel="Flights">
              <Tabs.Label label="Flights" iconName="airplane" />
          </Tabs.Item>
          <Tabs.Item name="trips" accessibilityLabel="Trips">
              <Tabs.Label label="Trips" iconName="bag-checked" />
          </Tabs.Item>
          <Tabs.Item name="explore" accessibilityLabel="Explore">
              <Tabs.Label label="Explore" iconName="compass-outline" />
          </Tabs.Item>
      </Tabs>
  );
}

Controlled​

Preview (Web)
import { useState } from 'react';
import { Tabs } from 'react-native-molecules/components/Tabs';

export default function Example() {
  const [value, setValue] = useState('trips');

  return (
      <Tabs value={value} onChange={setValue}>
          <Tabs.Item name="flight" label="Flights">
              <Tabs.Label label="Flights" iconName="airplane" />
          </Tabs.Item>
          <Tabs.Item name="trips" label="Trips" iconName="bag-checked">
              <Tabs.Label label="Trips" iconName="bag-checked" />
          </Tabs.Item>
          <Tabs.Item name="explore" label="Explore" iconName="compass-outline">
              <Tabs.Label label="Explore" iconName="compass-outline" />
          </Tabs.Item>
      </Tabs>
  );
}