> ## 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.

# Code groups for multi-language examples

> Code groups are tabs for code. Write the explanation once and let readers switch to their language.

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>;
};

When your product has SDKs in multiple languages, showing the same example in Python, Node.js, and Ruby use code groups to show the variations in one component. Users select the tab for the language they want to see the example in.

## How code groups work

Wrap multiple code blocks in `<CodeGroup />` tags. Each code block must have a filename or title, which becomes the label for that option.

````mdx Example of a code group theme={null}
<CodeGroup>

```python create_user.py
client = mintlify.Client(api_key="YOUR_API_KEY")

user = client.users.create(
    name="Ada Lovelace",
    email="ada@example.com"
)
```

```javascript createUser.js
const client = new Mintlify({ apiKey: "YOUR_API_KEY" });

const user = await client.users.create({
  name: "Ada Lovelace",
  email: "ada@example.com",
});
```

```bash cURL
curl -X POST https://api.mintlify.com/users \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -d '{"name": "Ada Lovelace", "email": "ada@example.com"}'
```

</CodeGroup>
````

<CodeGroup>
  ```python create_user.py theme={null}
  client = mintlify.Client(api_key="YOUR_API_KEY")

  user = client.users.create(
      name="Ada Lovelace",
      email="ada@example.com"
  )
  ```

  ```javascript createUser.js theme={null}
  const client = new Mintlify({ apiKey: "YOUR_API_KEY" });

  const user = await client.users.create({
    name: "Ada Lovelace",
    email: "ada@example.com",
  });
  ```

  ```bash cURL theme={null}
  curl -X POST https://api.mintlify.com/users \
    -H "Authorization: Bearer YOUR_API_KEY" \
    -d '{"name": "Ada Lovelace", "email": "ada@example.com"}'
  ```
</CodeGroup>

## Tab sync and naming consistency

Code group tabs sync with other code groups and tab components on the page. If a user selects `Python` in one code group or tab, all other components with a `Python` tab switch automatically.

This only works if labels match exactly. For example, if one component uses `Python` and another uses `Python 3`, they do not sync. Establish a naming convention and use it everywhere:

## When to use the dropdown option

For pages with many language options, the default tab row can get crowded. Add the `dropdown` property to collapse the language selector into a dropdown menu:

````mdx theme={null}
<CodeGroup dropdown>

```python
# Python example
```

```javascript
// JavaScript example
```

```go
// Go example
```

```ruby
# Ruby example
```

```java
// Java example
```

</CodeGroup>
````

<CodeGroup dropdown>
  ```python theme={null}
  # Python example
  ```

  ```javascript theme={null}
  // JavaScript example
  ```

  ```go theme={null}
  // Go example
  ```

  ```ruby theme={null}
  # Ruby example
  ```

  ```java theme={null}
  // Java example
  ```
</CodeGroup>

<Quiz
  question="Your docs show installation commands for npm, yarn, and pnpm. Each command is one line. How should you structure these commands?"
  answers={[
{ text: "Tabs. They let users skip directly to the command for their package manager.", correct: false },
{ text: "Code group. The only difference between options is the language of the code.", correct: true },
{ text: "Remove two of the three options. Most users use npm.", correct: false },
{ text: "Put all the commands in a list without tabs or groups.", correct: false },
]}
  correctFeedback="Right. When the only difference between code samples is the language, a code group is the right component."
  incorrectFeedback="Tabs, removing options, or ungrouped lists all make it harder for readers to find and use the command for their preferred tool. Tabs are for contextual variation, not one-line code differences. Removing options excludes users who prefer another tool. Listing everything together clutters the docs and forces readers to scan. A code group is the right choice because it lets users jump to the command they want, keeps the explanation clean, and is easy to maintain."
/>

<Check>
  Next up: [Conditional content](/courses/components/conditional-content) — How to show different prose and components based on context that's already established on a page.
</Check>