# General Translation React SDKs (gt-react, gt-next): Plural
URL: https://generaltranslation.com/en-GB/docs/react/reference/components/plural.mdx
---

title: Plural
description: Render count-based content using the active locale's plural rules with General Translation gt-react. API reference for Plural.

---

The `<Plural>` component adapts a sentence based on a count, using the active locale&#39;s plural rules. It selects the correct form for a number — English needs two (&quot;one item&quot; / &quot;two items&quot;), while other languages need up to six.

*Available in `gt-react`, `gt-next`, `gt-tanstack-start`, and `gt-react-native`. Examples import from `gt-react`; import from your framework&#39;s package instead.*

## Overview [#overview]

Pass the count as `n` and provide a child prop for each plural form.

```tsx
<Plural
  n={count}
  one={<>You have one item.</>}
  other={<>You have some items.</>}
/>
```

*Note: place `<Plural>` inside a [`<T>`](/docs/react/reference/components/t) to translate the branches, and wrap dynamic values inside them in a variable component such as [`<Num>`](/docs/react/reference/components/num).*

## How it works [#how-it-works]

* **Locale-driven selection.** The value of `n` is matched to a plural category using the active locale&#39;s [Unicode CLDR plural rules](https://cldr.unicode.org/index/cldr-spec/plural-rules). The branch for that category renders.
* **Fallback.** If no matching branch exists, `children` renders as a fallback.
* **Falls back without a number.** If `n` is missing or not a valid number, `<Plural>` renders `children` as a fallback instead of throwing.

## Which forms to add [#forms]

You only need the plural forms your language uses. The possible forms are `zero`, `one`, `two`, `few`, `many`, `other`, plus the aliases `singular`, `dual`, and `plural`.

* In `en-US`, use `one` and `other` (or `singular` and `plural`).
* In `zh-CN`, only `other` is needed.

See the [CLDR plural rules](https://cldr.unicode.org/index/cldr-spec/plural-rules) for the forms used by each language.

## Props [#props]

| Prop                    | Description                              | Type        | Optional | Default       |
| ----------------------- | ---------------------------------------- | ----------- | -------- | ------------- |
| [`n`](#n)               | The count that selects the plural form.  | `number`    | No       | —             |
| [`children`](#children) | Fallback content when no branch matches. | `ReactNode` | Yes      | —             |
| [`locales`](#locales)   | Locale override for plural rules.        | `string[]`  | Yes      | Active locale |
| [`[form]`](#form)       | Content for a plural category.           | `ReactNode` | Yes      | —             |

### `n` [#n]

**Type** `number` · **Required**

The number used to determine the plural form. If it is missing or not a valid number, `<Plural>` renders `children` as a fallback rather than throwing.

### `children` [#children]

**Type** `ReactNode` · **Optional**

Fallback content rendered when no plural branch matches `n`.

### `locales` [#locales]

**Type** `string[]` · **Optional** · **Default** Active locale

Locales whose plural rules are used. When omitted, the active locale is used.

### `[form]` [#form]

**Type** `ReactNode` · **Optional**

One prop for each plural category — `zero`, `one`, `two`, `few`, `many`, `other` (or the aliases `singular`, `dual`, and `plural`). The available categories depend on the locale.

## Examples [#examples]

```tsx title="BasicExample.tsx"
import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural
      n={count} // [!code highlight]
      one={<>You have one item.</>}
      other={<>You have some items.</>}
    />
  );
}
```

```tsx title="FallbackExample.tsx"
import { Plural } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <Plural n={count} one={<>You have one item.</>}>
      You have some items. // [!code highlight]
    </Plural>
  );
}
```

```tsx title="PluralExample.tsx"
import { T, Plural, Num } from 'gt-react';

export default function ItemCount({ count }) {
  return (
    <T>
      <Plural
        n={count}
        one={<>You have <Num>{count}</Num> item.</>} // [!code highlight]
        other={<>You have <Num>{count}</Num> items.</>} // [!code highlight]
      />
    </T>
  );
}
```

## Notes [#notes]

* `<Plural>` handles pluralisation based on the active locale.
* Available branches depend on the locale and follow [Unicode CLDR plural rules](https://cldr.unicode.org/index/cldr-spec/plural-rules).
* See [`<Branch>`](/docs/react/reference/components/branch) for arbitrary value-based branching.