Skip to content

Input

A single-line text input widget.

  • Focusable
  • Container

Example

The example below shows how you might create a simple form using two Input widgets.

InputApp ▊▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▎ ▊Darren▎ ▊▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▎ ▊▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▎ ▊Last Name▎ ▊▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▎ 

from textual.app import App, ComposeResult
from textual.widgets import Input


class InputApp(App):
    def compose(self) -> ComposeResult:
        yield Input(placeholder="First Name")
        yield Input(placeholder="Last Name")


if __name__ == "__main__":
    app = InputApp()
    app.run()

Reactive Attributes

Name Type Default Description
cursor_blink bool True True if cursor blinking is enabled.
value str "" The value currently in the text input.
cursor_position int 0 The index of the cursor in the value string.
placeholder str str The dimmed placeholder text to display when the input is empty.
password bool False True if the input should be masked.

Messages

Changed

Bases: Message

Posted when the value changes.

Can be handled using on_input_changed in a subclass of Input or in a parent widget in the DOM.

Attributes:

Name Type Description
value str

The value that the input was changed to.
input Input

The Input widget that was changed.

control: Input property

Alias for self.input.

Submitted

Bases: Message

Posted when the enter key is pressed within an Input.

Can be handled using on_input_submitted in a subclass of Input or in a parent widget in the DOM.

Attributes:

Name Type Description
value str

The value of the Input being submitted.
input Input

The Input widget that is being submitted.

control: Input property

Alias for self.input.

Bindings

The Input widget defines the following bindings:

Key(s) Description
left Move the cursor left.
ctrl+left Move the cursor one word to the left.
right Move the cursor right.
ctrl+right Move the cursor one word to the right.
backspace Delete the character to the left of the cursor.
home,ctrl+a Go to the beginning of the input.
end,ctrl+e Go to the end of the input.
delete,ctrl+d Delete the character to the right of the cursor.
enter Submit the current value of the input.
ctrl+w Delete the word to the left of the cursor.
ctrl+u Delete everything to the left of the cursor.
ctrl+f Delete the word to the right of the cursor.
ctrl+k Delete everything to the right of the cursor.

Component Classes

The input widget provides the following component classes:

Class Description
input--cursor Target the cursor.
input--placeholder Target the placeholder text (when it exists).

Additional Notes

  • The spacing around the text content is due to border. To remove it, set border: none; in your CSS.

See Also