Kvaser CanKing GUI Extensions SDK - v7.3.0
    Preparing search index...

    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;
    }
    Index

    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

    disabled?: boolean

    Set to true to disable this control.

    endAdornment?: string

    A text to be displayed after the value.

    error?: boolean

    The current error state.

    fullWidth?: boolean

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

    helperText?: string

    Any helper text that should be displayed.

    id?: string

    The component id.

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

    Input mode.

    label?: string

    The label of this input control.

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

    Margins between controls inside this control.

    maxValue?: number

    The max value if numberType is set.

    minValue?: number

    The min value if numberType is set.

    numberType?: "float" | "int"

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

    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

    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

    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

    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).

    pattern?: string

    Regex pattern of the value in this control.

    required?: boolean

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

    size?: "small" | "medium"

    The component size.

    startAdornment?: string

    A text to be displayed in front of the value.

    sx?: SxProps<Theme>

    Optional sx properties.

    sxEndAdornment?: SxProps<Theme>

    Optional sx properties for the end adornment.

    sxStartAdornment?: SxProps<Theme>

    Optional sx properties for the start adornment.

    value: string

    The current value.

    Settings

    Member Visibility

    On This Page

    Properties