Textfield
Examples#
Basic Example#
import flet as ft
def main(page: ft.Page):
def handle_button_click(e: ft.Event[ft.Button]):
message.value = f"Textboxes values are: '{tb1.value}', '{tb2.value}', "
f"'{tb3.value}', '{tb4.value}', '{tb5.value}'."
page.update()
page.add(
tb1 := ft.TextField(label="Standard"),
tb2 := ft.TextField(label="Disabled", disabled=True, value="First name"),
tb3 := ft.TextField(label="Read-only", read_only=True, value="Last name"),
tb4 := ft.TextField(
label="With placeholder", hint_text="Please enter text here"
),
tb5 := ft.TextField(label="With an icon", icon=ft.Icons.EMOJI_EMOTIONS),
ft.Button(content="Submit", on_click=handle_button_click),
message := ft.Text(),
)
ft.run(main)
Handling change events#
import flet as ft
def main(page: ft.Page):
def handle_field_change(e: ft.Event[ft.TextField]):
message.value = e.control.value
page.update()
page.add(
ft.TextField(
label="Textbox with 'change' event:",
on_change=handle_field_change,
),
message := ft.Text(),
)
ft.run(main)
Password with reveal button#
import flet as ft
def main(page: ft.Page):
page.add(
ft.TextField(
label="Password with reveal button",
password=True,
can_reveal_password=True,
)
)
ft.run(main)
Multiline fields#
import flet as ft
def main(page: ft.Page):
page.add(
ft.TextField(
label="Standard",
multiline=True,
),
ft.TextField(
label="Disabled",
multiline=True,
disabled=True,
value="line1\nline2\nline3\nline4\nline5",
),
ft.TextField(
label="Auto adjusted height with max lines",
multiline=True,
min_lines=1,
max_lines=3,
),
)
ft.run(main)
Underlined and borderless TextFields#
import flet as ft
def main(page: ft.Page):
page.add(
ft.TextField(
label="Underlined",
border=ft.InputBorder.UNDERLINE,
hint_text="Enter text here",
),
ft.TextField(
label="Underlined filled",
border=ft.InputBorder.UNDERLINE,
filled=True,
hint_text="Enter text here",
),
ft.TextField(
label="Borderless",
border=ft.InputBorder.NONE,
hint_text="Enter text here",
),
ft.TextField(
label="Borderless filled",
border=ft.InputBorder.NONE,
filled=True,
hint_text="Enter text here",
),
)
ft.run(main)
Setting prefixes and suffixes#
import flet as ft
def main(page: ft.Page):
def handle_button_click(e: ft.Event[ft.Button]):
message.value = f"Textboxes values are: '{prefix_field.value}', "
f"'{suffix_field.value}', '{prefix_suffix_field.value}', '{color_field.value}'."
page.update()
page.add(
prefix_field := ft.TextField(label="With prefix", prefix="https://"),
suffix_field := ft.TextField(label="With suffix", suffix=".com"),
prefix_suffix_field := ft.TextField(
label="With prefix and suffix",
prefix="https://",
suffix=".com",
enable_interactive_selection=True,
),
color_field := ft.TextField(
label="My favorite color",
icon=ft.Icons.FORMAT_SIZE,
hint_text="Type your favorite color",
helper="You can type only one color",
counter="{value_length}/{max_length} chars used",
prefix_icon=ft.Icons.COLOR_LENS,
suffix="...is your color",
max_length=20,
),
ft.Button(content="Submit", on_click=handle_button_click),
message := ft.Text(),
)
ft.run(main)
Styled TextField#
import flet as ft
def main(page: ft.Page):
page.padding = 50
page.add(
ft.TextField(
text_size=30,
cursor_color=ft.Colors.RED,
selection_color=ft.Colors.YELLOW,
color=ft.Colors.PINK,
bgcolor=ft.Colors.BLACK26,
filled=True,
focused_color=ft.Colors.GREEN,
focused_bgcolor=ft.Colors.CYAN_200,
border_radius=30,
border_color=ft.Colors.GREEN_800,
focused_border_color=ft.Colors.GREEN_ACCENT_400,
max_length=20,
capitalization=ft.TextCapitalization.CHARACTERS,
)
)
ft.run(main)
Custom label, hint, helper, and counter texts and styles#
import flet as ft
def main(page: ft.Page):
page.theme_mode = ft.ThemeMode.LIGHT
def handle_field_change(e: ft.Event[ft.TextField]):
message.value = e.control.value
page.update()
page.add(
ft.TextField(
on_change=handle_field_change,
text_style=ft.TextStyle(
size=15,
italic=True,
color=ft.Colors.DEEP_ORANGE_600,
bgcolor=ft.Colors.LIME_ACCENT_200,
),
label="Label",
label_style=ft.TextStyle(
size=17,
weight=ft.FontWeight.BOLD,
italic=True,
color=ft.Colors.BLUE,
bgcolor=ft.Colors.RED_700,
),
hint_text="Hint",
hint_style=ft.TextStyle(
size=15,
weight=ft.FontWeight.BOLD,
italic=True,
color=ft.Colors.PINK_ACCENT,
bgcolor=ft.Colors.BROWN_400,
),
helper="Helper",
helper_style=ft.TextStyle(
size=14,
weight=ft.FontWeight.BOLD,
color=ft.Colors.DEEP_PURPLE,
bgcolor=ft.Colors.BLUE_50,
),
counter="Counter",
counter_style=ft.TextStyle(
size=14,
italic=True,
color=ft.Colors.YELLOW,
bgcolor=ft.Colors.GREEN_500,
),
),
message := ft.Text(),
)
ft.run(main)
Bases: FormFieldControl, AdaptiveControl
A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard.
autofill_hints: list[AutofillHint] | AutofillHint | None = (
None
)
Helps the autofill service identify the type of this text input.
More information here.
autofocus: bool = False
True if the control will be selected as the initial focus. If there is more than one control on a page with autofocus set, then the first one added to the page will get focus.
can_reveal_password: bool = False
Displays a toggle icon button that allows revealing the entered password. Is shown
if both password and can_reveal_password are True.
The icon is displayed in the same location as suffix and in case both
can_reveal_password/password and suffix are provided, then the suffix is
not shown.
capitalization: TextCapitalization | None = None
Enables automatic on-the-fly capitalization of entered text.
Defaults to TextCapitalization.NONE.
enable_suggestions: bool = True
Whether to show input suggestions as the user types.
This flag only affects Android. On iOS, suggestions are tied directly to
autocorrect, so that suggestions are only shown when autocorrect is True.
On Android autocorrection and suggestion are controlled separately.
Defaults to True.
input_filter: InputFilter | None = None
Provides as-you-type filtering/validation.
Similar to the on_change callback, the input filters are not applied when the
content of the field is changed programmatically.
keyboard_type: KeyboardType = TEXT
The type of keyboard to use for editing the text.
max_length: int | None = None
Limits a maximum number of characters that can be entered into TextField.
max_lines: int | None = None
The maximum number of lines to show at one time, wrapping if necessary.
This affects the height of the field itself and does not limit the number of lines that can be entered into the field.
If this is 1 (the default), the text will not wrap, but will scroll horizontally
instead.
min_lines: int | None = None
The minimum number of lines to occupy when the content spans fewer lines.
This affects the height of the field itself and does not limit the number of lines that can be entered into the field.
Defaults to 1.
on_blur: ControlEventHandler[TextField] | None = None
Called when the control has lost focus.
on_change: ControlEventHandler[TextField] | None = None
Called when the typed input for the TextField has changed.
on_focus: ControlEventHandler[TextField] | None = None
Called when the control has received focus.
on_submit: ControlEventHandler[TextField] | None = None
Called when user presses ENTER while focus is on TextField.
read_only: bool = False
Whether the text can be changed.
When this is set to True, the text cannot be modified by any shortcut or keyboard
operation. The text is still selectable.
Defaults to False.
shift_enter: bool = False
Changes the behavior of Enter button in multiline TextField to be chat-like,
i.e. new line can be added with Shift+Enter and pressing just Enter fires
on_submit event.
smart_dashes_type: bool = True
Whether to allow the platform to automatically format dashes.
This flag only affects iOS versions 11 and above. As an example of what this does, two consecutive hyphen characters will be automatically replaced with one en dash, and three consecutive hyphens will become one em dash.
Defaults to True.
smart_quotes_type: bool = True
Whether to allow the platform to automatically format quotes.
This flag only affects iOS. As an example of what this does, a standard vertical double quote character will be automatically replaced by a left or right double quote depending on its position in a word.
Defaults to True.