NJFTextFieldProps

export interface NJFTextFieldProps {
  label?: {
    text?: string;
    className?: string;
  };
  validation?: {
    displayValidationError?: boolean;
    className?: string;
    position?: NJFNodePositionEnum;
    insideInput?: boolean;
    realtimeValidation?: boolean;
    preventiveValidation?: boolean;
  };
  niceName?: string;
  validationRules?: null | NJFInputValidationRules;
  resetValue?: string;
  icon?: ReactNode;
  placeHolder?: string;
  className?: string;
  inputClassName?: string;
  inputWrapperClassName?: string;
  extraNodesOutSide?: ReactNode[];
  extraNodesInside?: ReactNode[];
  min?: number;
  max?: number;
  autofill?: boolean;
  required?: boolean;
}
PropertyTypeDescription
labelCustom?Label for the input.
validationCustom?Properties customizing validation.
niceNamestring?A user friendly name that will be used for the automated validation messages.
validationRulesnull | NJFInputValidationRules?The actual validation rules for the field.
resetValuestring?Value that will be used if the form gets soft reset.
iconReactNode?ReactNode that can be used for an icon (or any component)
placeHolderstring?Input's placeholder.
classNamestring?Classes used in the wrapper of the component.
inputClassNamestring?Classes used in the actual <input> node.
inputWrapperClassNamestring?Classes used for the wrapper of the <input> node (which is inside the wrapper of the component.)
extraNodesOutSideArray of ReactNode?Any extra nodes that will be rendered outside the wrapper of the <input> node.
extraNodesInsideArray of ReactNode?Any extra nodes that will be rendered inside the wrapper of the <input> node.
minnumber?Minimum value applied only for number fields.
maxnumber?Maximum value applied only for number fields.
autofillboolean?Input's autofill property.
requiredboolean?Input's required property.

* = Required ? = Optional

label

PropertyTypeDescription
textstring?Label's text
classNamestring?Label's classes.

validation

PropertyTypeDescription
displayValidationErrorboolean?Label's text
classNamestring?Label's classes.
positionNJFNodePositionEnum?The position where the validation error message will be displayed.
insideInputboolean?Whether or not the message will be placed inside the wrapper of the input or outside.
realtimeValidationboolean?If true, validation rules (if any) will be executed in realtime (using onChange event).
preventiveValidationboolean?If true, the property of the validation rules customRegex will be executed at runtime but instead of displaying an error message, any character that matches that rule will not be allowed to be typed (replaced with '').