← Examples

Internationalisation — Portuguese + Arabic RTL

Three widgets on one page. The document stays lang="en". The Portuguese and Arabic widgets differ from the document language, so each stamps its own lang; the English widget matches, so it stamps none. Type one letter to see the pluralised result-count announcement (try a query matching exactly 1, then 3 suggestions). The Arabic widget is dir="rtl" — the input sits on the right and the × renders before each label. The English widget overrides only a11y.selectedTags; every other string falls back to its built-in English default.

Português (locale: "pt")

العربية (locale: "ar", dir: "rtl")

English with partial overrides (locale: "en")

View code 
<h2>Português (<code>locale: "pt"</code>)</h2>
<label for="tags-pt">Frutas favoritas</label>
<input id="tags-pt" type="text" name="frutas" />

<h2>العربية (<code>locale: "ar", dir: "rtl"</code>)</h2>
<label for="tags-ar">الفواكه المفضلة</label>
<input id="tags-ar" type="text" name="fakiha" />

<h2>English with partial overrides (<code>locale: "en"</code>)</h2>
<label for="tags-en">Favourite fruits</label>
<input id="tags-en" type="text" name="fruits" />

<script type="module">
  import { Taga11y } from '../dist/taga11y.mjs';
  import ptStrings from '../dist/locales/pt.json' with { type: 'json' };
  import arStrings from '../dist/locales/ar.json' with { type: 'json' };

  new Taga11y(document.getElementById('tags-pt'), {
    suggestions: ['Maçã', 'Banana', 'Cereja', 'Tâmara', 'Laranja'],
    i18n: { locale: 'pt', strings: ptStrings },
  });

  new Taga11y(document.getElementById('tags-ar'), {
    suggestions: ['تفاح', 'موز', 'كرز', 'تمر', 'برتقال'],
    i18n: { locale: 'ar', dir: 'rtl', strings: arStrings },
  });

  // Same language as the document → no `lang` stamped; only
  // `a11y.selectedTags` overridden, the rest fall back to English.
  new Taga11y(document.getElementById('tags-en'), {
    suggestions: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
    i18n: { locale: 'en', strings: { 'a11y.selectedTags': 'Chosen items' } },
  });
</script>