Skip to main content

TextBox

Reference​

  • The TextBox component is a used to display input field with support for numeric-only input, optional decimal values, and custom styling.

Props​

  1. isDisabled

    • Type: boolean
    • Description: Disables the input field if true.

  2. numericOnly

    • Type: boolean
    • Description: Restricts input to numeric values if true.

  3. allowDecimal

    • Type: boolean
    • Description: Allows decimal values if numericOnly is true.

  4. value

    • Type: string | number
    • Description: The current value of the input field.

  5. onEdit

    • Type: function
    • Description: Callback triggered when the input value changes.

  6. onFocusOut

    • Type: function
    • Description: Callback triggered when the input loses focus.

  7. style

    • Type: object | string
    • Description: Custom styles or class names for the input field.

  8. placeholder

    • Type: string
    • Description: Placeholder text for the input field.

  9. inputType

    • Type: string
    • Default: 'text'
    • Description: Specifies the input type (e.g., text, number, password).

Usage Example​

  • This renders a numeric-only input field that allows decimals and logs the edited value on change.
function Example(pageContext) {
    const { protrakComponents } = React.useContext(customWidgetContext);
    const { TextBox } = protrakComponents;
    return(
        <TextBox
            numericOnly={true}
            allowDecimal={true}
            value="123.45"
            onEdit={(val) => console.log('Edited value:', val)}
            placeholder="Enter a number"
        />
    );
}

Sample UI​

Text Attribute