> ## Documentation Index
> Fetch the complete documentation index at: https://learn.mintlify.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tabs for platform and audience variation

> Use tabs for content that varies based on a user's context. Misusing them hides information instead of organizing it.

export const Quiz = ({question, answers, correctFeedback, incorrectFeedback}) => {
  const [selected, setSelected] = React.useState(null);
  const [checked, setChecked] = React.useState(false);
  const quizId = React.useId();
  const isCorrect = checked && answers[selected]?.correct;
  const reset = () => {
    setSelected(null);
    setChecked(false);
  };
  return <div className={"quiz-container" + (checked ? " quiz-checked" : "")}>
      <Badge color="green">Quiz</Badge>
      <p className="quiz-question" id={quizId + "-question"}>{question}</p>
      <div className="quiz-options" role="radiogroup" aria-labelledby={quizId + "-question"} aria-disabled={checked}>
        {answers.map((answer, i) => <label key={i} className={["quiz-option", !checked && selected === i ? "quiz-option-selected" : "", checked && answer.correct ? "quiz-option-correct" : "", checked && selected === i && !answer.correct ? "quiz-option-incorrect" : ""].filter(Boolean).join(" ")}>
            <input type="radio" name={"quiz-" + quizId} checked={selected === i} onChange={() => !checked && setSelected(i)} disabled={checked} />
            <span className="quiz-radio" />
            <span className="quiz-option-label">{answer.text}</span>
          </label>)}
      </div>
      {checked && <div className={"quiz-feedback " + (isCorrect ? "quiz-feedback-correct" : "quiz-feedback-incorrect")} role="status" aria-live="polite" aria-atomic="true">
          <span className="quiz-feedback-icon">{isCorrect ? "✓" : "✗"}</span>
          {isCorrect ? correctFeedback : incorrectFeedback}
        </div>}
      <div className="quiz-actions">
        {!checked ? <button className="quiz-btn quiz-btn-check" type="button" onClick={() => selected !== null && setChecked(true)} disabled={selected === null}>
            Check answer
          </button> : <button className="quiz-btn quiz-btn-reset" type="button" onClick={reset}>
            Try again
          </button>}
      </div>
    </div>;
};

Tabs let users switch between versions of content on the same page. Used well, they keep documentation concise and targeted. Used poorly, they force users to click through variations they don't need and make it hard to find the information they need.

Before adding tabs, identify if content varies by user context like operating system, language, or authentication method, or if it's content that different users need to compare like different authentication methods.

## What are tabs good for?

Tabs are the right tool when your content covers the same topic but the implementation differs based on something about the user's setup.

````mdx Example of tabs theme={null}
<Tabs>
  <Tab title="npm">
    ```bash
    npm install @mintlify/sdk
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn add @mintlify/sdk
    ```
  </Tab>
  <Tab title="pnpm">
    ```bash
    pnpm add @mintlify/sdk
    ```
  </Tab>
</Tabs>
````

A user installing with `npm` doesn't need to read the `yarn` instructions. Tabs let them skip directly to what applies to them without having to read through the other instructions.

Other good uses:

* Operating system variations (macOS, Windows, Linux)
* SDK language examples (Python, Node, Ruby)
* Authentication methods when the choice was already made earlier in setup
* Separate content for two distinct user roles (admin versus user)

## Tab sync

When tabs across a page share the same title, selecting one syncs all of them. For example, if a user selects `Python` in one tab group, every other tab group on the page with a `Python` tab title switches automatically.

To sync, tab titles must match exactly. `Python`, `python`, and `Python 3` don't sync.

```mdx Tab groups that sync and ones that don't theme={null}
{/* These two groups sync because the titles match */}
<Tabs>
  <Tab title="Python">...</Tab>
  <Tab title="Node.js">...</Tab>
</Tabs>

<Tabs>
  <Tab title="Python">...</Tab>
  <Tab title="Node.js">...</Tab>
</Tabs>

{/* These don't sync */}
<Tabs>
  <Tab title="Python 3">...</Tab>
  <Tab title="NodeJS">...</Tab>
</Tabs>
```

If you want a tab group to operate independently of other tab groups, add `sync={false}`:

```mdx Example of a tab group with syncing disabled theme={null}
<Tabs sync={false}>
  <Tab title="npm">...</Tab>
  <Tab title="yarn">...</Tab>
  <Tab title="pnpm">...</Tab>
</Tabs>
```

## When not to use tabs

Don't use tabs to compare options. If users need to read both tabs to make a decision, tabs aren't appropriate. They make it hard to compare since users must switch back and forth between tabs. Use a table, side-by-side columns, or sequential sections instead.

Don't bury a recommendation in tabs. If one option is right for 90% of users, putting it side by side with the 10% case implies they're equal. State the recommendation before the tabs.

Don't use tabs to manage page length. A page that's too long needs to be split into multiple pages or reorganized, not tabbed. Tabs should never hide content that users require.

Don't duplicate tabs that your site navigation already handles. If your documentation already separates admin and user content into different sections, adding role-based tabs inside a page signals that the page is in the wrong section.

If you have more than four or five tab options, consider a `<CodeGroup>` with the `dropdown` prop instead. Long tab rows get crowded on mobile and can be hard to read.

<Quiz
  question="Your page explains three deployment strategies. Users need to understand all three to choose the right one. Should you use tabs?"
  answers={[
{ text: "Yes. Tabs organize the three strategies clearly.", correct: false },
{ text: "No. Users need to read all three to decide, so hiding them in tabs works against them.", correct: true },
{ text: "Yes. But add sync={false} so the tabs don't interfere with other tab groups.", correct: false },
{ text: "No. Use an accordion for each strategy instead.", correct: false },
]}
  correctFeedback="Right. Tabs are for content that varies by user context, where each user only needs one tab. If users need to compare all the options to make a decision, hiding two of them behind tabs makes it harder to compare. Show the strategies side-by-side in a table, headings with prose, or a columns layout instead."
  incorrectFeedback="Tabs hide content. That's useful when each user only needs one version that they self-select and ignore the rest. But when the point is to compare, hiding the options behind tabs makes the comparison harder. Use a table, headings with prose, or a columns layout instead."
/>

<Check>
  Next up: [Code groups for multi-language examples](/courses/components/code-groups) — How code groups handle the specific case of showing the same code in multiple languages.
</Check>