@atlaskit/form/dist/types/character-counter.d.ts

A form allows people to input information.

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
export interface CharacterCounterProps {
    /**
     * Maximum number of characters allowed (optional)
     */
    maxCharacters?: number;
    /**
     * Minimum number of characters required (optional)
     */
    minCharacters?: number;
    /**
     * Current value of the input field
     */
    currentValue?: string;
    /**
     * Optional custom message to display when character limit is exceeded
     */
    overMaximumMessage?: string;
    /**
     * Optional custom message to display when character limit is not exceeded
     */
    underMaximumMessage?: string;
    /**
     * Optional custom message to display when minimum character requirement is not met
     */
    underMinimumMessage?: string;
    /**
     * Whether to style violations as errors (red text + icon).
     * By default, violations are automatically styled as errors.
     *
     * In forms, set this to false to suppress error styling when
     * the form hasn't flagged an error yet (e.g., field not touched).
     *
     * // Standalone: smart default (violations = errors)
     * <CharacterCounter currentValue={value} maxCharacters={100} />
     *
     * // Form: align with final-form error state
     * <CharacterCounter
     *   currentValue={value}
     *   maxCharacters={100}
     *   shouldShowAsError={isCharacterCountViolation}
     * />
     */
    shouldShowAsError?: boolean;
    /**
     * ID of the associated input for accessibility.
     * Not needed if the character counter is used within CharacterCounterField.
     * When provided, the character counter will have an ID of `${inputId}-character-counter`
     * which should be referenced in the input's `aria-describedby` attribute.
     * If not provided, will attempt to use InputId context from Form.
     */
    inputId?: string;
    /**
     * A testId prop is provided for specified elements, which is a unique string
     * that appears as a data attribute data-testid in the rendered code,
     * serving as a hook for automated tests
     */
    testId?: string;
}
/**
 * __Character Counter__
 *
 * A character counter component that displays remaining characters for text input.
 * Displays messages for over or under the maximum or minimum character limits.
 */
declare const CharacterCounter: ({ maxCharacters, minCharacters, currentValue, overMaximumMessage, underMaximumMessage, underMinimumMessage, shouldShowAsError, inputId, testId, }: CharacterCounterProps) => JSX.Element | null;
export default CharacterCounter;