Character Counter

Components

Character Counter

Character Counter is a flexible utility component used to tally the remaining number of text characters available for input.

-50

import { CharacterCounter } from '@sproutsocial/racine'

<Box display='flex' justifyContent='center' alignItems='center'>
  <CharacterCounter
    currentValue={295}
    maxValue={300}
    mr={600}
  />

  <CharacterCounter
    currentValue={350}
    maxValue={300}
  />
</Box>

<Box display='flex' justifyContent='center' alignItems='center'>
  <CharacterCounter
    currentValue={295}
    maxValue={300}
    mr={600}
  />
  <CharacterCounter
    currentValue={350}
    maxValue={300}
  />
</Box>

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON

Learn more

Name	Type	Default	Description
`currentValue`	`number`		Current value of relative input/textarea
`maxValue`	`number`		Max amount of characters for input/textarea
`size`	`"default""mini"`	`"default"`	Size of the Counter