SelectOrdinal

SelectOrdinal is the Component Macro counterpart to the core selectOrdinal macro.

It is useful when ordinal cases belong directly in template markup and the component form is easier to maintain than a function call.

Standard ICU plural categories (one, two, few, many, other) are used as plain prop names. Exact-value matches use an underscore-prefixed number: _1="1st" matches exactly when value is 1, taking precedence over the category props. This is useful for irregular ordinals that do not map cleanly to a category in all locales.

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

Source

Demo.svelte Catalog

<p>
  <SelectOrdinal value={place} one="#st" two="#nd" few="#rd" other="#th" />
</p>

#: src/demos/macros/select-ordinal-component/Demo.svelte
msgid "{place, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}"
msgstr "{place, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}"

Result

Preview Transformed Svelte Compiled Catalog

1st

<p>
  <L4sRuntimeTrans {.../*i18n*/
  {
    id: "foaSz6",
    values: {
      place: place
    }
  }} />
</p>

/*eslint-disable*/
import type { Messages } from "@lingui/core";
export const messages = JSON.parse(
  "{\"foaSz6\":[[\"place\",\"selectordinal\",{\"one\":[\"#\",\"st\"],\"two\":[\"#\",\"nd\"],\"few\":[\"#\",\"rd\"],\"other\":[\"#\",\"th\"]}]]}",
) as Messages;

Locale

EN JA

Place

Usage

Svelte

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

  let place = $state(1);
</script>

<SelectOrdinal value={place} one="#st" two="#nd" few="#rd" other="#th" />

Astro

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

const place = 1;
---

<SelectOrdinal value={place} one="#st" two="#nd" few="#rd" other="#th" />

Official Lingui

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

function Component() {
  return (
    <SelectOrdinal value={place} one="#st" two="#nd" few="#rd" other="#th" />
  );
}

Exact value match

Prefix a number with _ to match an exact value. Exact matches take precedence over category props.

<SelectOrdinal value={place} _1="1st" _2="2nd" _3="3rd" other="#th" />

The function form uses plain numeric keys for the same effect:

<p>{$selectOrdinal(place, { 1: '1st', 2: '2nd', 3: '3rd', other: '#th' })}</p>

When SelectOrdinal is a good fit

• ordinal branches belong naturally in template markup
• the component form is clearer than selectOrdinal(...)
• you want authoring symmetry with Plural and Select