FormMessageInputLengthCounterProps

Props that are used to automatically add a counter for the remaining letters available for the text field. The counter will always be created to the right of the optional message.

The counter is really a simple string of: ${length} / ${maxLength}.

If you need additional customization, it is recommended to create your own implementation such as:

<FormMessage>
  {errorMessage}
  <MyCounter {...props} />
</FormMessage>

Note: this should not be used alongside form-level messages.

remarks: @since 2.9.0 Renamed from FormMessageCounterProps to FormMessageInputLengthCounterProps since a FormMessageCounter component was added

Hierarchy

FormMessageInputLengthCounterProps
- FormMessageWithCounterProps

Index

Properties

Optional counterClassName

counterClassName?: string

An optional className to apply to the counter wrapper element.

Optional counterStyle

counterStyle?: CSSProperties

An optional style to apply to the counter wrapper element.

length

length: number

The current length of the value in the related text field.

maxLength

maxLength: number

The max length allowed for the value in the related text field.