---
meta:
title: Translation Group
description: A panel-styled container that provides a shared language select for multiple translation inputs.
layout: component
---
The Translation Group component wraps multiple `zn-translations` components in a panel-styled container with a shared
language select. The select sits at the top right of the header, opposite the caption. Closed, it carries how many
languages are done as a `1/5` chip; open, each language is marked translated, partial or falling back to English.
Choosing a language switches every child at once.
```html:preview
```
## Examples
### Basic Usage
A translation group with two translation inputs sharing one language select.
```html:preview
```
### With Label
Use the `label` attribute to add a caption on the left of the header, opposite the language select. `language-label`
sets the select's accessible name — it is not shown, since the caption names the section on screen.
```html:preview
```
### Pre-filled Values
Set initial translations on each child. A language every child has a value for is marked `Translated`; one only some
children have is `Partial`; one no child has falls back to English. English itself is the source, so it is neither
counted nor marked as a translation.
```html:preview
```
### Many Languages
Every configured language is offered whether or not it has been translated yet, so there is no separate step to add
one — pick it and start typing. The chip on the closed select tracks how many are done.
```html:preview
```
### Custom Accessible Name
`language-label` is read out by a screen reader in place of a visible label.
```html:preview
```
### Inline (No Panel)
Nested inside another panel, the group's own border and padding indent its fields out of line with everything around
them. `inline` drops the chrome so the group reads as a section of the form instead.
```html:preview
```
### Actions
Buttons for the bottom of the group go in the `actions` slot. They sit on the white body rather than the grey
`footer`, and follow zinc's form action rows in sitting on the right. `align="start"` moves one to the left; any
number can sit on either side. Write them in the order they should be read — the sides are set by CSS ordering, so
markup order is what a keyboard follows.
```html:preview
Auto-translate
Cancel
Save
```
### Flush Layout
Remove body padding for a more compact appearance using the `flush` attribute.
```html:preview
```
### Listening to Language Changes
The group emits a `zn-language-change` event when the active language changes.
```html:preview
Active Language:
en
```
## Properties
| Property | Type | Default | Description |
|------------------|--------------------------|--------------------|---------------------------------------------------|
| `label` | `string` | `''` | Caption displayed in the panel header |
| `language-label` | `string` | `'Edit Languages'` | The select's accessible name; not shown on screen |
| `inline` | `boolean` | `false` | Drops the panel border, background and padding |
| `languages` | `Record` | `{en: "EN"}` | Object mapping language codes to display names |
| `flush` | `boolean` | `false` | Removes body padding for compact layout |
## Events
| Event | Description | Event Detail |
|----------------------|------------------------------------------|------------------------|
| `zn-language-change` | Emitted when the active language changes | `{ language: string }` |
## Slots
| Slot | Description |
|-----------|------------------------------------------------------------|
| (default) | Place `` elements here |
| `label` | Alternative to the `label` attribute for rich HTML content |
| `actions` | Buttons for the bottom of the body; `align="start"` on a child moves it to the left |
| `footer` | Content displayed in the grey panel footer |
The header carries the caption and the language select alone; nothing else is slotted into it.
## CSS Parts
| Part | Description |
|-------------------|-----------------------------------------------------------------|
| `base` | The outer panel wrapper |
| `header` | The header area containing the caption and the language select |
| `language-field` | The container holding the language select |
| `language-select` | The select itself |
| `actions` | The row of buttons at the bottom of the body |
| `translations` | The body container wrapping the slotted children |