@dnb/eufemia/docs/uilib/components/fragments/text-counter.md

DNB Eufemia Design System UI Library

---
title: 'TextCounter'
description: 'Use TextCounter to show how many characters someone has typed or can still type.'
version: 11.8.2
generatedAt: 2026-07-03T14:39:18.723Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# TextCounter

## Import

```tsx
import { TextCounter } from '@dnb/eufemia/fragments'
```

## Description

The `TextCounter` is a component designed to provide real-time character count feedback in text input fields.

It provides the correct text translations and color and a visual indicator of the remaining characters.

It is used in the [Textarea](/uilib/components/textarea/) component.

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/fragments/text-counter)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter)

## Related components

TextCounter is part of the [Input](/uilib/components/overview/#input) category. Other components for similar needs:

- [Autocomplete](/uilib/components/autocomplete/) – to help people find and choose from matching suggestions as they type.
- [Checkbox](/uilib/components/checkbox/) – when people can turn one or more options on or off.
- [DatePicker](/uilib/components/date-picker/) – when people need to choose one date or a date range.
- [Dropdown](/uilib/components/dropdown/) – when people need to choose one option from a list.
- [Filter](/uilib/components/filter/) – to help people narrow down a list or data set.
- [FormLabel](/uilib/components/form-label/) – to name an input, control, or form-related field.

[See all in Input](/uilib/components/overview/#input)

## Demos

### Interactive

```tsx
const text = 'Count me!'
const variant: TextCounterProps['variant'] = 'down'
const Counter = () => {
  const { data } = Form.useData('text-counter', {
    max: 10,
    variant,
    text,
  })
  return (
    <Flex.Stack divider="line">
      <Flex.Vertical gap="x-small">
        <Field.String label="Text" path="/text" maxLength={data.max} />
        <TextCounter
          variant={data.variant}
          text={data.text}
          max={data.max}
        />
      </Flex.Vertical>
      <Field.Toggle
        valueOn="down"
        valueOff="up"
        textOn="Down"
        textOff="Up"
        variant="buttons"
        label="Variant"
        path="/variant"
      />
    </Flex.Stack>
  )
}
render(
  <Form.Handler id="text-counter">
    <Counter />
  </Form.Handler>
)
```

### Count characters downwards

```tsx
render(<TextCounter variant="down" text="test" max={10} />)
```

### Count characters upwards

```tsx
render(<TextCounter variant="up" text="test" max={10} />)
```

### Show message as exceeded

```tsx
render(<TextCounter text="test" max={2} />)
```

## Properties

```json
{
  "props": {
    "text": {
      "doc": "The text to count characters from.",
      "type": "string",
      "status": "required"
    },
    "max": {
      "doc": "The maximum number of characters allowed.",
      "type": "number",
      "status": "required"
    },
    "variant": {
      "doc": "The counting variant. Can be either `up` (counts up from zero) or `down` (counts down from max). Defaults to `down`.",
      "type": ["\"down\"", "\"up\""],
      "status": "optional"
    },
    "[Space](/uilib/layout/space/properties)": {
      "doc": "Spacing properties like `top` or `bottom` are supported.",
      "type": ["string", "object"],
      "status": "optional"
    }
  }
}
```

## Translations

```json
{
  "locales": ["da-DK", "en-GB", "nb-NO", "sv-SE"],
  "entries": {
    "TextCounter.characterDown": {
      "nb-NO": "%count av %max tegn gjenstår.",
      "en-GB": "%count of %max characters remaining.",
      "sv-SE": "%count av %max tecken återstår.",
      "da-DK": "%count af %max tegn tilbage."
    },
    "TextCounter.characterExceeded": {
      "nb-NO": "%count tegn over grensen på %max.",
      "en-GB": "%count characters over the limit of %max.",
      "sv-SE": "%count tecken över gränsen på %max.",
      "da-DK": "%count tegn over grænsen på %max."
    },
    "TextCounter.characterUp": {
      "nb-NO": "Du har brukt %count av %max tegn.",
      "en-GB": "You have used %count of %max characters.",
      "sv-SE": "Du har använt %count av %max tecken.",
      "da-DK": "Du har brugt %count af %max tegn."
    }
  }
}
```