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.
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 |
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 |
Input
|
The |
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¶
- Input code reference