---
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 fields sit in a [form group](/components/form-group), so the caption, help text and the select
share its label column and the fields line up with every other form group around them. Closed, the select carries how
many languages are done as a `1/5` chip; open, each language is marked translated, partial or falling back to English.
Type to filter the list — by name or by language code, so `de` finds German. 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
```
### Label and Help Text
`label` names the section in the form group's label column, and `help-text` sits under it — the pair behave as they do
on any other form group. The language select follows them, in the group's chip position. `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 marked `Empty` rather than
falling back, having nothing to fall back to, and counts towards the total like any other language.
```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` | `''` | Names the section, in the form group's label column |
| `help-text` | `string` | `''` | Sits under the label, above the language select |
| `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 |
| `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 |
## CSS Parts
| Part | Description |
|-------------------|----------------------------------------------------------------------|
| `base` | The outer panel wrapper |
| `form-group` | The form group holding the caption, the language select and the fields |
| `language-field` | The container holding the language select, in the group's chip slot |
| `language-select` | The select itself |
| `actions` | The row of buttons at the bottom of the body |