# TabList Elevated

A tablist allows people to switch between categories of related information without going to different pages.

## Preview

## Elevated Appearance

Source: CoreAI.

`TabList`'s `appearance` prop is widened with a CoreAI-only `"elevated"`
value. It keeps the stock `subtle` tab styling (active indicator, hover)
but wraps the whole strip in a raised, rounded, background-filled
container — like a `Card` — so it reads as a distinct surface rather than
sitting flush with the page. Every other appearance (`transparent`,
`subtle`, `subtle-circular`, `filled-circular`) is passed straight through
to the stock Fluent `TabList` unchanged.



[Download source](/coreai-design-system/source/examples/components-tablist--elevated-appearance.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { Text } from "@coreai-ds/react-components";
import { TabList } from "@coreai-ds/react-components";
import { Tab } from "@coreai-ds/react-components";
import * as React from 'react';

export const ElevatedAppearance = () => {
    const styles = /* css */ `
      .tab-list-elevated-example {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--spacingVerticalXXL) var(--spacingHorizontalL);
        row-gap: var(--spacingVerticalXXL);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="tab-list-elevated-example">
          <Text as="p" block>
            The <code>elevated</code> appearance raises the tab strip onto its own background with
            rounded corners and padding around every tab, instead of the flat underline/indicator
            styling the other appearances use.
          </Text>
          <TabList appearance="elevated" defaultSelectedValue="tab2">
            <Tab value="tab1">First Tab</Tab>
            <Tab value="tab2">Second Tab</Tab>
            <Tab value="tab3">Third Tab</Tab>
          </TabList>
        </div>
      </>);
};

export default ElevatedAppearance;
```

## Best practices

### Do

- Always have one tab active on initial render.
- Use a consistent label format across every tab.
- Keep labels brief and parallel.

### Don't

- Use a tablist when constrained space makes the options hard to find; consider an accordion or dropdown.
- Use tabs for unrelated navigation or actions.

## Behavior and states

- One tab, usually the first, should always be active on first render.
- Use one consistent label format for every tab in the tablist.
- Keep tab labels brief and parallel.
- When space is limited, consider an accordion or dropdown instead.

## Resources

- [Figma component](https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=432771-25797)
- [Fluent guidance](https://fluent2.microsoft.design/components/web/react/core/tablist/usage)