# Localization component

> The Localization component allows you to target a single locale and make structural changes to the composition.

Source: https://docs.uniform.app/docs/guides/composition/localization/localization-component

> **Legacy feature:**
>
> Structural localization can be performed more easily by using [Component Visibility Control](https://docs.uniform.app/docs/guides/composition/conditional-logic/component-visibility-control).
>
> The use of the Localization component detailed below **is not recommended for new projects** and should be used only for backward compatibility.

For simple cases of [structural localization](https://docs.uniform.app/docs/guides/composition/localization#structural-localization), Uniform provides the Localization component. The Localization component can be placed into a slot and contain child components that can be tagged to appear only in a specific locale.

## Enable Localization component on a slot

A Localization component is like any other component, so if you have slots that have specifically allowed components in them, you must enable the Localization component to be used in the slot you want to localize.

> **Tip:**
>
> If you are using a slot that allows any component, you can skip this and go straight to "[Localize components with the Localization component](#localize-components-with-the-localization-component)"

1. In **Experience > Components**, edit a component with the slot to which you want to add localized components.
2. Navigate to the slot.
3. In the section **Allowed Components**, select the component **Localization**.

![The hero component can be localized in the slot.](https://docs.uniform.app/images/guides/composition/localization/component-selected.png)

> **Note:**
>
> You must have other components selected on the slot. Those will
> be the component types that can be localized in this slot.

1. Click **OK**.
2. Save the component.

## Localize components with the Localization component

1. In the visual editor navigate to a slot where you want to localize a component.
2. Insert a component into the slot and select the component **Localization**.
3. Select an existing component that should be localized and move it into the new **Localization** component. Or create a new component inside the **Localization** component.
4. A new parameter **Locale** is available on the component.
   This parameter is a dropdown of the locales you defined in
   your project. Select the locale for the component.

   ![The localized component within the structure panel of Canvas.](https://docs.uniform.app/images/guides/composition/localization/locale-assigned.png)

   > **Note:**
   >
   > The locale assigned to the component will appear in the
   > box that represents the component in the composition.
5. Save the composition.
6. Add more components under the component **Localization** and
   assign a locale to each component you add. Each component will
   represent the locale you assigned.

   ![Localized components within the localization structure.](https://docs.uniform.app/images/guides/composition/localization/localized-components.png)

### Object format of the Localization component

The following
is an example of the JSON object that represents a slot with
components localized for two locales (such as `en-US` and `da-DK`):

```json
{
  "parameters": {},
  "type": "$localization",
  "slots": {
    "localized": [
      {
        "type": "event",
        "parameters": {
          "name": {
            "type": "text",
            "value": "Sankt Hans Aften"
          },
          "locale": {
            "type": "localeSelect",
            "value": "da-DK"
          }
        }
      },
      {
        "type": "event",
        "parameters": {
          "name": {
            "type": "text",
            "value": "Summer Solstice"
          },
          "locale": {
            "type": "localeSelect",
            "value": "en-US"
          }
        }
      }
    ]
  }
}
```