Skip Navigation
React Magma

Character Counter

A numeric counter that is used by Input and Textarea to help users know how much text they can enter when there is a limit on the number of characters.

Basic Usage

The Character Counter is called when the prop of maxCount is set within an Input or a Textarea.

As the user types, a counter is displayed below the Input or Textarea counting down to the allowable length. Once this is exceeded, an error message shows in place counting the overrage of characters.

import React from 'react';


import { Input } from 'react-magma-dom';


export function Example() {
  return <Input maxCount={4} labelText="Default Character Counter" />;
}

Initial Value

When an intial value is needed, the value prop may be used. The Character Counter then shows the remainder against the value accordingly.

import React from 'react';


import { Input } from 'react-magma-dom';


export function Example() {
  return (
    <Input maxCount={4} value="hi" labelText="Inital Value Character Counter" />
  );
}

maxLength vs maxCount

The maxLength prop temporarily controlled the Character Counter, but moving forward it should exclusively be used for the HTML native behavior of preventing users from typing beyond the set maximum length.

To enable the Character Counter, use maxCount (preferred) or both maxLength and hasCharacterCounter (to be deprecated in future versions).

import React from 'react';


import { Input } from 'react-magma-dom';


export function Example() {
  return <Input maxCount={4} labelText="Default Character Counter" />;
}

Inverse

isInverse is an optional boolean prop, that may be passed in when inputs are to be displayed on a dark background.

import React from 'react';


import { Container, Input } from 'react-magma-dom';


export function Example() {
  return (
    <Container isInverse style={{ padding: '12px' }}>
      <Input isInverse maxCount={4} labelText="Character Counter" />
    </Container>
  );
}

Internationalization

If you're using strings in your component, they must be internationalized.

Full example of internationalization override options

import React from 'react';


import { Input, I18nContext, defaultI18n } from 'react-magma-dom';


export function Example() {
  return (
    <I18nContext.Provider
      value={{
        ...defaultI18n,
        characterCounter: {
          charactersAllowed: 'allowed in this custom string',
          charactersLeft: 'left in this custom string',
          characterLeft: 'left in this custom string',
          characterOver: 'over the limit in this custom string',
          charactersOver: 'over the limit in this custom string',
        },
      }}
    >
      <Input maxCount={4} labelText="Character Counter" />
    </I18nContext.Provider>
  );
}

Character Counter Props

Any other props supplied will be provided to the wrapping div element.

hasCharacterCounter

Description

Enables Character Counter by default. When set to false, the default HTML attribute of 'maxlength' will work. Note: This is a temporary prop and will be removed in future releases.

Type

boolean

Default

true

id

Required

Description

Identifier to associate Character Counter with Input.

Type

string

Default

-

inputLength

Required

Description

Total number of characters in an input.

Type

number

Default

-

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

maxCount

Required

Description

Sets the maximum amount of characters allowed.

Type

number

Default

-

maxLength

RequiredDeprecated

Description

Sets the maximum amount of characters allowed.

Type

number

Default

-

On this page

Deploys by Netlify