Skip to content

input

A control that displays some text that can potentially be edited.

Properties

Name Type Default Description
value(★) Any
dynamic		 None

The value represented by this control.
password bool False

If True, the text is obscured, and all characters are displayed as asterisks ('*').
This can be useful for sensitive information such as passwords.
label str None

The label associated with the input field.
This provides context to the user and improves accessibility.
multiline bool False

If True, the input is rendered as a multi-line text area
The default behavior is a single-line input.
lines_shown int 5

The number of lines displayed in the input control when multiline is True.
type str "text"

The type of input element, as per HTML input types.
This property enforces specific input formats where applicable. Supported values include "text", "tel", "email", "url", etc.
action_on_blur bool False

If True, the on_action callback is triggered when the input control looses keyboard focus (e.g., when the user presses the Tab key). When this happens, the key name for the event (set in the args property of the payload parameter to the callback function) is set to "Tab".
change_delay int App config

The minimum interval (in milliseconds) between two consecutive calls to the on_change callback.
The default value is defined at the application configuration level by the change_delay configuration option.
if None, the delay is set to 300 ms.
If set to -1, the callback is triggered only when the user presses the Enter key.
on_action Union[str, Callable]

A function or the name of a function that is triggered when a specific key is pressed.
The callback function is invoked with the following parameters:

  • state (State): the state instance.
  • id (str): the identifier of the control if it has one.
  • payload (dict): the callback details
    This dictionary has the following keys:
    • action: the name of the action that triggered this callback.
    • args (list):
      • The key name pressed.
      • The variable name.
      • The current value of the variable.
action_keys str "Enter"

A semicolon-separated list of keys that can trigger the on_action callback.
Authorized values are Enter, Escape, and function keys F1 to F12.
width Union[str, int] None

The width of the element, in CSS units.
on_change Union[str, Callable]

A function or the name of a function that is triggered when the value changes.
The callback function receives the following parameters:

  • state (State): the state instance.
  • var_name (str): the bound variable name.
  • value (Any): the updated value.
propagate bool App config

Determines whether the control's value is automatically reflected in the bound application variable.
The default value is defined at the application configuration level by the propagate configuration option.
If True, any change to the control's value is immediately reflected in the variable.
active bool
dynamic		 True

Indicates if this element is active.
If False, the element is disabled, and user interaction is not allowed.
id str

The identifier assigned to the rendered HTML component.
This can be used in callbacks or to target the element for styling.
properties dict[str, Any]

A dictionary of additional properties that can be set to the element.
class_name str
dynamic

A space-separated list of CSS class names to be applied to the generated HTML element.
These classes are added to the default taipy-input class.
hover_text str
dynamic

The text that is displayed when the user hovers over the element.

(★)value is the default property for this visual element.

Usage

Get user input

You can create an input field bound to a variable with the following content:

Definition

<|{value}|input|>

<taipy:input>{value}</taipy:input>

import taipy.gui.builder as tgb
...
tgb.input("{value}")

Styling

All the input controls are generated with the "taipy-input" CSS class. You can use this class name to select the input controls on your page and apply style.

Stylekit support

The Stylekit provides a specific class that you can use to style input controls:

  • fullwidth
    If an input control uses the fullwidth class, then it uses the whole available horizontal space.