# CodeGroup

`CodeGroup` wraps two or more fenced code blocks into a tabbed interface, switching between them the same way `Tabs` does — one visible at a time. Give each fenced block a `title` (`` ```js title="helloWorld.js" ``) and that becomes its tab label; with no `title`, the block's language is used instead (`JS`, `BASH`, ...).

<CodeGroup>
```js title="helloWorld.js"
console.log("Hello World");
```
```python title="hello_world.py"
print("Hello World!")
```
```java title="HelloWorld.java"
class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello, World!");
  }
}
```
</CodeGroup>

````mdx
<CodeGroup>
```js title="helloWorld.js"
console.log("Hello World");
```
```python title="hello_world.py"
print("Hello World!")
```
</CodeGroup>
````

A single-block `CodeGroup` renders as one plain bordered block with no tab strip — there's nothing to switch between:

<CodeGroup>
```bash
npm install writedocs
```
</CodeGroup>

Set `dropdown` for a `<select>` switcher instead of a tab strip:

````mdx
<CodeGroup dropdown>
```js title="index.js"
...
```
```python title="index.py"
...
```
</CodeGroup>
````

**`CodeGroup` props**

<Parameter name="dropdown" type="boolean" default="false">
  A `<select>` switcher instead of a tab strip.
</Parameter>