# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Plural>`
URL: https://generaltranslation.com/en-GB/docs/react/reference/components/plural.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Render count-based content using the active locale's plural rules. API reference for the `<Plural>` component.

The `<Plural>` component changes its wording based on a count so the sentence agrees with the number in each language. 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`.*

## 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.

- **Branch fallback.** If the selected category is unavailable, `<Plural>` uses `plural`, then `other`. It renders `children` only when neither generic branch exists.

* **Falls back without a number.** If `n` is missing or not a valid number, `<Plural>` renders `children` as a fallback instead of throwing.

<Callout type="info">
  **Changed in v11.1.8:** Missing `zero` and `one` categories now fall back to
  `plural` or `other` before `children`, matching the existing behaviour for
  `two`, `few`, and `many`.
</Callout>

## 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) | Final fallback when no category or generic 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 exact category, `plural`, or `other` 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]

*Examples import from `gt-react`; import from your framework&#39;s package instead.*

```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).
* **Related component:** [`<Branch>`](/docs/react/reference/components/branch) handles arbitrary value-based branching.

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.