Skip to content
Home

TextCounter

Info
Demos
Properties

Import

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

Relevant links

Related components

TextCounter is part of the Input category. Other components for similar needs:

  • Autocomplete — to help people find and choose from matching suggestions as they type.
  • Checkbox — when people can turn one or more options on or off.
  • DatePicker — when people need to choose one date or a date range.
  • Dropdown — when people need to choose one option from a list.
  • Filter — to help people narrow down a list or data set.
  • FormLabel — to name an input, control, or form-related field.

See all in Input →

Demos

Interactive

1 av 10 tegn gjenstår.

Variant
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

6 av 10 tegn gjenstår.

<TextCounter variant="down" text="test" max={10} />

Count characters upwards

Du har brukt 4 av 10 tegn.

<TextCounter variant="up" text="test" max={10} />

Show message as exceeded

2 tegn over grensen på 2.

<TextCounter text="test" max={2} />