Interface ValidateableTextControlProps

Properties of the ValidateableTextControl React component.

interface ValidateableTextControlProps {
    disabled?: boolean;
    endAdornment?: string;
    error?: boolean;
    fullWidth?: boolean;
    helperText?: string;
    id?: string;
    inputMode?:
        | "search"
        | "text"
        | "none"
        | "tel"
        | "url"
        | "email"
        | "numeric"
        | "decimal";
    label?: string;
    margin?: "none"
    | "normal"
    | "dense";
    maxValue?: number;
    minValue?: number;
    numberType?: "float" | "int";
    onBlur?: (value: string) => void;
    onChange?: (value: string) => void;
    onErrorChange?: (error: boolean) => void;
    onValidate?: (
        text: string,
        trigger: "change" | "blur",
    ) => { err: boolean; val: string };
    pattern?: string;
    required?: boolean;
    size?: "small" | "medium";
    startAdornment?: string;
    sx?: SxProps<Theme>;
    sxEndAdornment?: SxProps<Theme>;
    sxStartAdornment?: SxProps<Theme>;
    value: string;
}

Properties

disabled? endAdornment? error? fullWidth? helperText? id? inputMode? label? margin? maxValue? minValue? numberType? onBlur? onChange? onErrorChange? onValidate? pattern? required? size? startAdornment? sx? sxEndAdornment? sxStartAdornment? value

Properties

Optionaldisabled

disabled?: boolean

Set to true to disable this control.

OptionalendAdornment

endAdornment?: string

A text to be displayed after the value.

Optionalerror

error?: boolean

The current error state.

OptionalfullWidth

fullWidth?: boolean

Set to true to expand this control to use the full widht of its parent.

OptionalhelperText

helperText?: string

Any helper text that should be displayed.

Optionalid

id?: string

The component id.

OptionalinputMode

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

Input mode.

Optionallabel

label?: string

The label of this input control.

Optionalmargin

margin?: "none" | "normal" | "dense"

Margins between controls inside this control.

OptionalmaxValue

maxValue?: number

The max value if numberType is set.

OptionalminValue

minValue?: number

The min value if numberType is set.

OptionalnumberType

numberType?: "float" | "int"

Number type if the expected value is a number, if left undefined then the value is expected to be a string.

OptionalonBlur

onBlur?: (value: string) => void

Callback that will be called when the control has lost focus.

Type declaration

    • (value: string): void

    • Parameters

      • value: string

        The new value.

      Returns void

OptionalonChange

onChange?: (value: string) => void

Callback that will be called when the value has been changed.

Type declaration

    • (value: string): void

    • Parameters

      • value: string

        The new value.

      Returns void

OptionalonErrorChange

onErrorChange?: (error: boolean) => void

Callback that is called when the error state has changed.

Type declaration

    • (error: boolean): void

    • Parameters

      • error: boolean

        The new error state.

      Returns void

OptionalonValidate

onValidate?: (
    text: string,
    trigger: "change" | "blur",
) => { err: boolean; val: string }

Callback that will be called when the value has been changed or the control has lost focus. This callback is called before onChange and if the returned err value is true then onChange won't be called. The implemtation of this callback is allowed to modify the specified text value and return the modified value in the val property of the returned object.

Type declaration

    • (text: string, trigger: "change" | "blur"): { err: boolean; val: string }

    • Parameters

      • text: string

        The new text value.

      • trigger: "change" | "blur"

        The trigger of this callback, either on 'change' or on 'blur'.

      Returns { err: boolean; val: string }

      An object with the validated value (val) and an error state (err).

Optionalpattern

pattern?: string

Regex pattern of the value in this control.

Optionalrequired

required?: boolean

Set to true if this control's value is required.

Optionalsize

size?: "small" | "medium"

The component size.

OptionalstartAdornment

startAdornment?: string

A text to be displayed in front of the value.

Optionalsx

sx?: SxProps<Theme>

Optional sx properties.

OptionalsxEndAdornment

sxEndAdornment?: SxProps<Theme>

Optional sx properties for the end adornment.

OptionalsxStartAdornment

sxStartAdornment?: SxProps<Theme>

Optional sx properties for the start adornment.

value

value: string

The current value.

Settings

Member Visibility

On This Page

Properties