Skip to content
Home

TextCounter

Info
Demos
Properties

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

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} />

Interactive

1 av 10 tegn gjenstår
Variant
Code Editor
const Counter = () => {
  const { data } = Form.useData('text-counter-up', initialData)
  return (
    <Flex.Stack divider="line">
      <Flex.Vertical spacing="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>
  )
}
const variant: TextCounterProps['variant'] = 'down'
const initialData = {
  max: 10,
  variant,
  text: 'Count me!',
}
render(
  <Form.Handler id="text-counter-up">
    <Counter />
  </Form.Handler>,
)