select

select is the Core Macro for ICU select messages. There is also a Component Macro form of the same logic, Select.

Use it when a message changes based on a named case such as tone, role, status, or grammatical category. It can be used directly to produce a translated string, or embedded inside a t`...` template literal when the select belongs to a larger message.

Case keys are plain JavaScript object keys written without any prefix: { formal: "Welcome", casual: "Hi", other: "Hello" }. No underscore is used in the function form. The _-prefixed convention applies only to the component macro Select, where underscores distinguish custom case props from the reserved value and other props.

For the framework-agnostic Lingui semantics, see the official select reference.

Source

Demo.svelte Catalog

<p>
  {$select(tone, {
    formal: "Welcome",
    casual: "Hi",
    other: "Hello",
  })}
</p>

#: src/demos/macros/select/Demo.svelte
msgid "{tone, select, formal {Welcome} casual {Hi} other {Hello}}"
msgstr "{tone, select, formal {Welcome} casual {Hi} other {Hello}}"

Result

Preview Transformed Svelte Compiled Catalog

Welcome

<p>
  {$__l4s_translate(
  /*i18n*/
  {
    id: "JSpkOy",
    values: {
      tone: tone
    }
  })}
</p>

/*eslint-disable*/
import type { Messages } from "@lingui/core";
export const messages = JSON.parse(
  "{\"JSpkOy\":[[\"tone\",\"select\",{\"formal\":[\"Welcome\"],\"casual\":[\"Hi\"],\"other\":[\"Hello\"]}]]}",
) as Messages;

Locale

EN JA

Tone

FormalCasualOther

Usage

Svelte

<script lang="ts">
  import { select, t } from "lingui-for-svelte/macro";

  let tone = $state("formal");
</script>

<!-- Standalone: produces the select string directly. -->
<p>
  {$select(tone, {
    formal: "Welcome",
    casual: "Hi",
    other: "Hello",
  })}
</p>

<!-- Embedded: select is part of a larger translated unit. -->
<p>
  {$t`Greeting: ${select(tone, {
    formal: "Welcome",
    casual: "Hi",
    other: "Hello",
  })}`}
</p>

In .svelte files, use $select for reactive standalone use. When nested inside $t`...`, use select without the $ prefix.

See Reactive Macros for the full explanation, including the select.eager escape hatch.

Astro

---
import { select, t } from "lingui-for-astro/macro";

const tone = "formal";
---

<!-- Standalone: produces the select string directly. -->
<p>
  {
    select(tone, {
      formal: "Welcome",
      casual: "Hi",
      other: "Hello",
    })
  }
</p>

<!-- Embedded: select is part of a larger translated unit. -->
<p>
  {
    t`Greeting: ${select(tone, {
      formal: "Welcome",
      casual: "Hi",
      other: "Hello",
    })}`
  }
</p>

Official Lingui

import { select, t } from "@lingui/core/macro";

// Standalone
const label: string = select(tone, {
  formal: "Welcome",
  casual: "Hi",
  other: "Hello",
});

// Embedded
const message: string = t`Greeting: ${select(tone, {
  formal: "Welcome",
  casual: "Hi",
  other: "Hello",
})}`;

When select is a good fit

• the message depends on a non-numeric case value
• the cases are easier to express as strings than as markup props
• you want the same semantics as official Lingui Core select