Select

Select is the Component Macro counterpart to the core select macro.

It expresses the same case-based ICU selection logic, but in a way that can read more naturally in a markup file than a nested function call.

Custom case values (everything except other) are prefixed with _ to distinguish them from reserved component props like value. For example, a formal case becomes _formal="...". The other case is not prefixed because it is a required ICU keyword, not a custom value.

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

Source

Demo.svelte Catalog

<p>
  <Select value={tone} _formal="Welcome" _casual="Hi" other="Hello" />
</p>

#: src/demos/macros/select-component/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

Hi

<p>
  <L4sRuntimeTrans {.../*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 } from "lingui-for-svelte/macro";

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

<Select value={tone} _formal="Welcome" _casual="Hi" other="Hello" />

Astro

---
import { Select } from "lingui-for-astro/macro";

const tone = "casual";
---

<Select value={tone} _formal="Welcome" _casual="Hi" other="Hello" />

Official Lingui

import { Select } from "@lingui/react/macro";

function Component() {
  return <Select value={tone} _formal="Welcome" _casual="Hi" other="Hello" />;
}

When Select is a good fit

• your file is already markup-oriented
• the select branches are easier to read as component props
• you want the component form without changing the underlying Lingui semantics