Tabs

Functionality based on the Tab radix component, which already allows for: controlled/uncontrolled tabbing, disabling or partly disabling options, adds keyboard navigation and orientation and more.

Implements experimental ColorScheme component to allow multiple colour setups.

<Tabs defaultValue="tab2">
  <Tabs.TriggerList>
    <Tabs.Trigger value="tab1">
      Nested component under the Tabs.Trigger component
    </Tabs.Trigger>
    <Tabs.Trigger value="tab2">Simple text</Tabs.Trigger>
  </Tabs.TriggerList>
  <Tabs.Content css={{ p: '$3' }} value="tab1">
    <Text>Content for tab1.</Text>
  </Tabs.Content>
  <Tabs.Content css={{ p: '$3' }} value="tab2">
    <Text>
      Content for the second tab. It can also hold other components, like a
    </Text>
    <Button>Button</Button>
  </Tabs.Content>
</Tabs>

Disabled

A Tabs.Trigger component can take a disabled prop, which would make it unselectable. The corresponding Tabs.Content component's content will be, in this case, permanently hidden.

<Tabs defaultValue="tab1">
  <Tabs.TriggerList>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2" disabled>
      Tab 2
    </Tabs.Trigger>
  </Tabs.TriggerList>
  <Tabs.Content css={{ p: '$3' }} value="tab1">
    <Text>Content for tab1.</Text>
  </Tabs.Content>
  <Tabs.Content css={{ p: '$3' }} value="tab2">
    <Text>Content for tab2.</Text>
  </Tabs.Content>
</Tabs>

Color Scheme

You can pass in a colorScheme object to the TriggerList to customise the colours of the component. Defaults to { base: "slate", accent: "blue", interactive: "hiContrast1"} ColorScheme is experimental and has been implemented only locally but you can read more about how it currently works and available options on the repository's github.

<Tabs defaultValue="tab2">
  <Tabs.TriggerList
    colorScheme={{ base: 'slate', accent: 'slate', interactive: 'hiContrast2' }}
  >
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.TriggerList>
  <Tabs.Content css={{ p: '$3' }} value="tab1">
    <Text>Content for tab1.</Text>
  </Tabs.Content>
  <Tabs.Content css={{ p: '$3' }} value="tab2">
    <Text>Content for tab2.</Text>
  </Tabs.Content>
</Tabs>
<Tabs defaultValue="tab2">
  <Tabs.TriggerList
    colorScheme={{ base: 'slate', accent: 'slate', interactive: 'hiContrast2' }}
  >
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.TriggerList>
  <Tabs.Content css={{ p: '$3' }} value="tab1">
    <Text>Content for tab1.</Text>
  </Tabs.Content>
  <Tabs.Content css={{ p: '$3' }} value="tab2">
    <Text>Content for tab2.</Text>
  </Tabs.Content>
</Tabs>
Edit me!