Interface ITextFieldProps<Data, Payload>

Represents the properties for a text field component.

interface ITextFieldProps<Data = IAnything, Payload = IAnything> {
    autoFocus?: boolean;
    description?: string;
    disabled?: boolean;
    groupRef?: (element?: null | HTMLDivElement) => void;
    inputAutocomplete?: "new-password" | "on" | "off" | "false";
    inputFormatter?: (input: string) => string;
    inputFormatterAllowed?: RegExp | (char: string, idx: number) => boolean;
    inputFormatterReplace?: (char: string) => null | string;
    inputFormatterSymbol?: string;
    inputFormatterTemplate?: string;
    inputMode?:
        | "search"
        | "text"
        | "email"
        | "tel"
        | "url"
        | "none"
        | "numeric"
        | "decimal";
    inputPattern?: string;
    inputRef?: (element?: null | HTMLInputElement) => void;
    inputRows?: number;
    inputType?:
        | "number"
        | "color"
        | "search"
        | "text"
        | "date"
        | "email"
        | "month"
        | "password"
        | "tel"
        | "time"
        | "url"
        | "week";
    labelShrink?: boolean;
    leadingIcon?: any;
    leadingIconClick?: (
        value: Value,
        data: Data,
        payload: Payload,
        onValueChange: (v: Value) => void,
        onChange: (data: Data) => void,
    ) => void;
    leadingIconRipple?: boolean;
    leadingIconTabIndex?: number;
    outlined?: boolean;
    placeholder?: string;
    readonly?: boolean;
    title?: string;
    trailingIcon?: any;
    trailingIconClick?: (
        value: Value,
        data: Data,
        payload: Payload,
        onValueChange: (v: Value) => void,
        onChange: (data: Data) => void,
    ) => void;
    trailingIconRipple?: boolean;
    trailingIconTabIndex?: number;
    validation?: IValidation;
}

Type Parameters

  • Data = IAnything

    The type of data associated with the field.

  • Payload = IAnything

    The type of payload associated with the field.

Properties

autoFocus? description? disabled? groupRef? inputAutocomplete? inputFormatter? inputFormatterAllowed? inputFormatterReplace? inputFormatterSymbol? inputFormatterTemplate? inputMode? inputPattern? inputRef? inputRows? inputType? labelShrink? leadingIcon? leadingIconClick? leadingIconRipple? leadingIconTabIndex? outlined? placeholder? readonly? title? trailingIcon? trailingIconClick? trailingIconRipple? trailingIconTabIndex? validation?

Properties

OptionalautoFocus

autoFocus?: boolean

Specifies if the field should be automatically focused.

Optionaldescription

description?: string

Returns the "description" property value of the given field object.

Template: IField

The type of the field object.

Template: Data

The type of the data associated with the field.

Template: Payload

The type of the payload object associated with the field.

Param: field

The field object from which to retrieve the "description" property.

Returns

The value of the "description" property.

Optionaldisabled

disabled?: boolean

Represents the disabled property of a field in a form.

OptionalgroupRef

groupRef?: (element?: null | HTMLDivElement) => void

Represents the reference to a group in a field.

OptionalinputAutocomplete

inputAutocomplete?: "new-password" | "on" | "off" | "false"

Represents an optional input autocomplete feature for a field.

Template: Data

The type of data associated with the field.

Template: Payload

The type of payload associated with the field.

OptionalinputFormatter

inputFormatter?: (input: string) => string

Represents the input formatter function for a specific field in the Data object.

OptionalinputFormatterAllowed

inputFormatterAllowed?: RegExp | (char: string, idx: number) => boolean

Represents the allowed input formatters for a field.

OptionalinputFormatterReplace

inputFormatterReplace?: (char: string) => null | string

Defines the input formatter replace configuration for a field.

OptionalinputFormatterSymbol

inputFormatterSymbol?: string

Specifies the input formatter symbol for a given field.

OptionalinputFormatterTemplate

inputFormatterTemplate?: string

Represents an input formatter template used in a field.

OptionalinputMode

inputMode?:
    | "search"
    | "text"
    | "email"
    | "tel"
    | "url"
    | "none"
    | "numeric"
    | "decimal"

The inputMode variable is an optional property that represents the input mode of a field in a form.

OptionalinputPattern

inputPattern?: string

Represents the input pattern for a field in a data payload.

OptionalinputRef

inputRef?: (element?: null | HTMLInputElement) => void

Represents the input reference property of a field.

OptionalinputRows

inputRows?: number

Represents the number of input rows required for a field.

OptionalinputType

inputType?:
    | "number"
    | "color"
    | "search"
    | "text"
    | "date"
    | "email"
    | "month"
    | "password"
    | "tel"
    | "time"
    | "url"
    | "week"

Represents the input type of a field.

Template: Data

The type of data being handled by the field.

Template: Payload

The type of payload associated with the field.

OptionallabelShrink

labelShrink?: boolean

Shrink option for labels.

OptionalleadingIcon

leadingIcon?: any

The leadingIcon property represents the leading icon of a field.

OptionalleadingIconClick

leadingIconClick?: (
    value: Value,
    data: Data,
    payload: Payload,
    onValueChange: (v: Value) => void,
    onChange: (data: Data) => void,
) => void

Represents the leading icon click event handler for a field in a form.

Type declaration

    • (
          value: Value,
          data: Data,
          payload: Payload,
          onValueChange: (v: Value) => void,
          onChange: (data: Data) => void,
      ): void

    • Parameters

      Returns void

      • Nothing is returned from this function.

OptionalleadingIconRipple

leadingIconRipple?: boolean

Represents the configuration for the leading icon ripple effect.

OptionalleadingIconTabIndex

leadingIconTabIndex?: number

Optionaloutlined

outlined?: boolean

Type definition to pick the outlined property from a given IField type.

Template: T

The type of the IField object.

Template: K

The property to be picked from IField.

Optionalplaceholder

placeholder?: string

A type definition representing the placeholder property of a given field.

Template: Data

The type of the field data.

Template: Payload

The type of the payload for the field.

Template: T

The type of the field.

Optionalreadonly

readonly?: boolean

Gets the value of the "readonly" property from the provided object.

Template: T

The type of the object that contains the "readonly" property.

Template: Prop

The type of the "readonly" property.

Param: object

The object to get the "readonly" property from.

Returns

  • The value of the "readonly" property.

Optionaltitle

title?: string

Type definition for the title property of an object.

Template: T

The type of the object from which to pick the property.

Template: K

The literal type of the property name to pick.

Typeparam

T - The type of the object from which to pick the property.

Typeparam

K - The literal type of the property name to pick.

Param: obj

The object from which to pick the property.

Returns

the value of the picked property.

OptionaltrailingIcon

trailingIcon?: any

Represents the trailing icon configuration for a field.

OptionaltrailingIconClick

trailingIconClick?: (
    value: Value,
    data: Data,
    payload: Payload,
    onValueChange: (v: Value) => void,
    onChange: (data: Data) => void,
) => void

The trailingIconClick property is an optional property that represents a callback function to be executed when the trailing icon of a field is clicked.

This property is of type PickProp<IField<Data, Payload>, "trailingIconClick">, where IField<Data, Payload> is a generic type representing a field with Data and Payload types.

Type declaration

    • (
          value: Value,
          data: Data,
          payload: Payload,
          onValueChange: (v: Value) => void,
          onChange: (data: Data) => void,
      ): void

    • Parameters

      Returns void

OptionaltrailingIconRipple

trailingIconRipple?: boolean

Represents the option to enable or disable the trailing icon ripple effect.

OptionaltrailingIconTabIndex

trailingIconTabIndex?: number

Optionalvalidation

validation?: IValidation

Validation factory config

Template: IField

Type representing the field object.

Template: Data

Type representing the data object.

Template: Payload

Type representing the payload object.

Returns

The value of the "validation" property.

Settings

Member Visibility

On This Page

Properties