# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<Plural>`
URL: https://generaltranslation.com/en-US/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 swaps its wording based on a count so the sentence agrees with the number in each language. English needs two ("one item" / "two items"), 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'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 behavior 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 each language's forms.

## 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 instead of 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**

A prop per 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'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 pluralization 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.