@atlaskit/form
Version:
A form allows people to input information.
52 lines (51 loc) • 2.82 kB
TypeScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { type ReactNode } from 'react';
import { type FieldComponentProps, type FieldProps, type Meta } from './field';
type SupportedElements = HTMLInputElement | HTMLTextAreaElement;
export interface CharacterCounterFieldProps<FieldValue = string, Element extends SupportedElements = HTMLInputElement> extends Omit<FieldComponentProps<FieldValue, Element>, 'children' | 'component' | 'helperMessage' | 'errorMessage' | 'validMessage' | 'transform'> {
/**
* The input component to render. Use a render function that receives `fieldProps`, `error`, `valid`, and `meta` state.
* Spread `fieldProps` onto your input element (such as `TextField` or `TextArea`).
*/
children: (args: {
fieldProps: FieldProps<FieldValue, Element>;
error?: string;
valid: boolean;
meta: Meta;
}) => ReactNode;
/**
* Helper text displayed above the input to provide additional context or instructions.
*/
helperMessage?: ReactNode;
/**
* Maximum number of characters allowed. When exceeded, the field displays an error message or the message provided by `overMaximumMessage`.
*/
maxCharacters?: number;
/**
* Minimum number of characters required. When not met, the character counter displays an error message or the message provided by `underMinimumMessage`.
*/
minCharacters?: number;
/**
* Custom message displayed when input exceeds the maximum character limit. Use this to provide context-specific guidance or localized messages. Overrides the default "X characters too many" message.
*/
overMaximumMessage?: string;
/**
* Custom message displayed when input is under the maximum limit. Use this to provide context-specific guidance or localized messages. Overrides the default "X characters remaining" message.
*/
underMaximumMessage?: string;
/**
* Custom message displayed when input is under the minimum requirement. Use this to guide users on how much more they need to type. Overrides the default "Minimum of X characters required" message.
*/
underMinimumMessage?: string;
}
/**
* __Character Counter Field__
*
* A field component that wraps the standard Field with automatic character count validation.
* Validates minimum and maximum character limits and displays a character counter.
*/
export default function CharacterCounterField<FieldValue = string, Element extends SupportedElements = HTMLInputElement>({ maxCharacters, minCharacters, children, validate: userValidate, overMaximumMessage, underMaximumMessage, underMinimumMessage, helperMessage, defaultValue, id, isRequired, isDisabled, label, elementAfterLabel, name, testId, }: CharacterCounterFieldProps<FieldValue, Element>): JSX.Element;
export {};