Text Input Showcase
Example
Hidable Example
Limit Width Email
Phone Example
Password Hidden
Number
Text Area
Popover Edit
Text Editor
Component Documentation
Component Name
TextInput
Builder Function Name
create_text_input_manager
Description
Builds an input (single or multi-line) with support for validations, placeholders, error messaging, toggling password visibility, optional popover editing, and more.
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| type | string | text | Determines the input field type. For multi-line input, specify `text_area`. |
| val | any | Starting value for the text field. | |
| label | string or null | A text label displayed above or beside the input. | |
| placeholder | string | varies by type | The placeholder text for the input. |
| name | string | text | HTML input `name` attribute. |
| autocomplete | string | varies by type | HTML autocomplete attribute (e.g., `email`, `current-password`, `off`, etc.). |
| is_required | boolean | false | If true, the input must have a value. |
| is_nullable | boolean | false | If true, a Set Null button appears, allowing the value to become `null`. |
| is_disabled | boolean | false | If true, the input is not editable. |
| error_message | string or null | Displays an error message below the label if present. | |
| replace_spaces_with | string or null | If set, replaces all spaces in input with this character/string. | |
| is_numbers_only | boolean | false | If true, removes all non-digits from the user input. |
| border_radius | number | 1 | Applied as a rem value to style the input's rounded corners. |
| ml | number | 0 | Margin-left (rem). |
| mr | number | 0 | Margin-right (rem). |
| mt | number | 0 | Margin-top (rem). |
| mb | number | 0 | Margin-bottom (rem). |
| max_length | number | 100000 | Sets the maximum characters allowed in the input. |
| min | number | -9007199254740990 | The minimum numeric value if `type` = 'number'. |
| max | number | 9007199254740990 | The maximum numeric value if `type` = 'number'. |
| is_show_limit | boolean | false | If true, shows `length/max_length` at the bottom-right of the input. |
| password_min_length | number | 7 | Minimum password length if `type = 'password'`. |
| is_password_requires_lowercase | boolean | true | Requires at least one lowercase letter for password validation. |
| is_password_requires_uppercase | boolean | false | Requires at least one uppercase letter for password validation. |
| is_password_requires_number | boolean | false | Requires at least one digit for password validation. |
| is_password_requires_special_char | boolean | false | Requires at least one special symbol for password validation. |
| is_password_tooltip_used | boolean | true | If true, shows a tooltip that describes password requirements. |
| is_text_hidable | boolean | varies by type | Toggles if we can show a hide/unhide button (e.g. for password). |
| is_text_hidden | boolean | varies by type | If true, text is hidden (type='password'). |
| is_preview_img | boolean | false | If true, tries to display a small image from the typed URL (when `type='url'`). |
| preview_img_size | number | 32 | Size in px for the optional preview image if `is_preview_img` and type='url'. |
| is_resizable | boolean | false | If true and `type='text_area'`, user can resize the textarea. |
| max_height | number | 30 | Max height in rem for a textarea. |
| rows | number | 5 | Number of visible text lines if `type='text_area'`. |
| is_popover | boolean | false | If true, renders inside a popover for editing. Otherwise, it's displayed inline. |
| popover_header | string or null | When `is_popover=true`, sets the popover's header text. | |
| update_button_text | string or null | If set, changes the popover's final button text from 'Finish' to a custom label. | |
| is_popover_edit_content | boolean | false | If true, displays the label/value inline, with a small edit button that opens the popover. Otherwise, the input is always visible inline or in the popover. |
| on_change | function or null | Callback triggered on each input event, receiving the updated value. | |
| on_blur | function or null | Callback triggered on input blur. | |
| on_finish | function or null | If `is_popover=true`, called when pressing the final button in the popover. Receives the current value. Return `{ is_success: boolean, message?: string }` for success or error feedback. |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| init | Initializes the internal states and managers, called once with the config. | No Params | |
| set_val | Sets the input value from outside the component, re-running validations. Syntax: `manager.set_val(newValue)`. | No Params | |
| set_focus | Focuses the input element if not disabled. | No Params | |
| set_type | Changes the input type dynamically (e.g., from 'password' to 'text') though not commonly used mid-flight. | No Params | |
| set_is_text_hidden | Toggles hiding or showing the text if `is_text_hidable = true` (e.g. for password fields). | No Params |
Returned Properties
| Property | Type | Description |
|---|---|---|
| val | any | The current input value. |
| error_message | string or null | If set, shows an error message. Also toggled by validations (e.g., password or URL). |
| is_valid | boolean | A boolean indicating if the input passes basic validation (URL, password, email checks, etc.). |
| is_image_url | boolean | If `is_preview_img = true`, indicates whether the current value is a valid image URL. |
| popover_manager | object | Controls the popover if `is_popover = true`. |
| popover_edit_button_manager | object | Displays an edit button if `is_popover_edit_content = true` to open the popover. |
| finish_button_manager | object | Button manager for the popover's final 'Finish' or update button. |
| set_null_button_manager | object | If `is_nullable = true`, provides a 'Set Null' button manager to quickly clear the input. |
