Skip to content

Term

<quiet-term> stable since 4.0

Outputs a translated term using the built-in localization system.

Renders a translated term declaratively in HTML. This component lets you use Quiet's localization system to place translated terms directly into your markup without needing a burrow or JavaScript. This is useful when you want to display terms in plain HTML and outside of reactive islands. 

<div id="term__overview">
  <!-- Display the term -->
  <quiet-term key="resultsAvailable" data-count="2"></quiet-term>

  <!-- Controls -->
  <div class="controls">
    <quiet-slider label="Count" value="2" min="0" max="3" with-markers with-tooltip></quiet-slider>

    <quiet-select label="Language" value="en">
      <option value="en">English</option>
      <option value="ja">Japanese</option>
      <option value="ru">Russian</option>
    </quiet-select>
  </div>
</div>

<script type="module">
  // Import translations
  import '/dist/translations/ja.js';
  import '/dist/translations/ru.js';

  const container = document.getElementById('term__overview');
  const term = container.querySelector('quiet-term');
  const slider = container.querySelector('quiet-slider');
  const select = container.querySelector('quiet-select');

  // Update the count when the slider changes
  slider.addEventListener('input', () => {
    term.dataset.count = slider.value;
  });

  // Update the language when the select changes
  select.addEventListener('input', () => {
    term.lang = select.value;
  });
</script>

<style>
  #term__overview {
    .controls {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      max-width: 300px;
      margin-block-start: 2rem;
    }
  }
</style>

For localized dates, numbers, and relative times, see <quiet-date>, <quiet-number>, and <quiet-relative-time>.

Quiet includes a set of built-in terms used by its own components. You can use them, but in most cases you'll want to register your own terms for content specific to your application.

To output a localized term, set the key attribute to any registered translation term. The component will render the translated text in-place. English terms are available by default, and additional languages can be imported separately.

Examples Jump to heading

Providing terms Jump to heading 



<quiet-term key="next"></quiet-term>
<br>
<quiet-term key="previous"></quiet-term>
<br>
<quiet-term key="loading"></quiet-term>

Terms can be slotted into components to localize content declaratively.





<quiet-button>
  <quiet-term key="copyToClipboard"></quiet-term>
</quiet-button>

<br><br>

<quiet-switch>
  <quiet-term key="showPassword"></quiet-term>
</quiet-switch>

<br><br>

<quiet-text-field variant="destructive">
  <quiet-term slot="label" key="signHere"></quiet-term>
</quiet-text-field>

Passing arguments Jump to heading

Some terms accept arguments, which can be passed as data-* attributes. Replace * with the name of the parameter defined in the translation function. For example, a term with a count parameter is set with the data-count attribute. 



<quiet-term key="pageNumber" data-number="3"></quiet-term><br>
<quiet-term key="numCharacters" data-count="140"></quiet-term><br>
<quiet-term key="numberOfTotal" data-number="5" data-total="10"></quiet-term>

Keys are case-sensitive. For example, key="pageNumber" and key="pagenumber" will resolve to different terms.

Using other languages Jump to heading

To use a language other than English, import the translation and activate it on either the document or an individual component using the lang attribute. Translations are self-registering. Simply import the file for the language you need and it becomes available. 

<script type="module">
  // Static import
  import '/dist/translations/fr.js';

  // Dynamic import (useful for loading on demand)
  await import('/dist/translations/fr.js');
</script>

See the localization page for the full list of available languages.

Activating a language Jump to heading

To activate a language for the entire page, set the lang attribute directly on the <html> element. This applies the language to all components on the page. For RTL languages such as Arabic and Hebrew, set dir="rtl" on the <html> element. 

<html lang="he" dir="rtl">
  ...
</html>

You can also set lang and dir directly on individual <quiet-term> elements to override the page language. 




<quiet-term lang="en" key="next"></quiet-term><br>
<quiet-term lang="fr" key="next"></quiet-term><br>
<quiet-term lang="ja" key="next"></quiet-term><br>
<quiet-term lang="ar" dir="rtl" key="next"></quiet-term>

<script type="module">
  import '/dist/translations/fr.js';
  import '/dist/translations/ja.js';
  import '/dist/translations/ar.js';
</script>

When lang or dir is changed on <html> or individual components, the translated terms will automatically update.

For performance reasons, lang and dir must be set on <html> or directly on the component. Setting them on other ancestor elements will have no effect.

Adding custom terms Jump to heading

You can register your own app-specific terms and use them with <quiet-term> and in burrows. Call registerTranslation() with the language code and your custom terms and they will be merged with any existing terms for that language.

Terms can be simple strings, functions that accept parameters, or functions with pluralization logic.




<script type="module">
  import { registerTranslation } from '/dist/utilities/localize.js';

  registerTranslation({
    $code: 'en',

    // Simple string
    myGreeting: 'Hello!',

    // Parameterized term
    myWelcome: ({ name }) => `Welcome, ${name}!`,

    // Pluralization
    myItemCount: ({ count }) => {
      if (count === 1) return '1 item';
      return `${count} items`;
    }
  });
</script>

<quiet-term key="myGreeting"></quiet-term><br>
<quiet-term key="myWelcome" data-name="Whiskers"></quiet-term><br>
<quiet-term key="myItemCount" data-count="1"></quiet-term><br>
<quiet-term key="myItemCount" data-count="5"></quiet-term>

If you're using Burrow, you can access your translations using the Localize controller. See localization in Burrow for details.

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN Self-hosted

To manually import <quiet-term> from the CDN, use the following code.

import 'https://cdn.quietui.org/v4.0.0/components/term/term.js';

To manually import <quiet-term> from a self-hosted distribution, use the following code. Remember to replace /path/to/quiet with the appropriate local path. 

import '/path/to/quiet/components/term/term.js';

Properties Jump to heading

Term has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property Description Reflects Type Default
key The translation key to resolve. This can be a term defined in a translation file or custom terms added with the registerTranslation() function. string
Search this website Toggle dark mode View the code on GitHub Follow @quietui.org on Bluesky Follow @quiet_ui on X

    No results found