Skip to main content

Tab

Allows navigation between related sections of content, displaying one section at a time. Can house a variety of patterns, from static content to completion of actions.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Tab } from '@iag/chroma-react-ui.components';

Accessibility​

Accessibility documentation(opens in new window)

Default​

Example with Icons​

Example with Payment Labels​

Block​

For mobile displays the tabs will stack and the content panels will show below

Properties​

Name
Description
  • className
    string
  • block
    boolean
  • onChange
    ((value: string | number) => void) & FormEventHandler<HTMLDivElement>
  • initial
    stringThe id of the intial tab to default open
  • id
    string

CSS Variables​