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.

Demos

Interactive

1 av 10 tegn gjenstår.

Variant
Code Editor
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.

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

Count characters upwards

Du har brukt 4 av 10 tegn.

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

Show message as exceeded

2 tegn over grensen på 2.

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