Create and style a text field
Text fields allow users to type text into an app. They are used to build forms, send messages, create search experiences, and more. In this recipe, explore how to create and style text fields.
Flutter provides two text fields: TextField
and TextFormField
.
TextField
#TextField
is the most commonly used text input widget.
By default, a TextField
is decorated with an underline. You can add a label, icon, inline hint text, and error text by supplying an InputDecoration
as the decoration
property of the TextField
. To remove the decoration entirely (including the underline and the space reserved for the label), set the decoration
to null.
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter a search term',
),
),
To retrieve the value when it changes, see the Handle changes to a text field recipe.
TextFormField
#TextFormField
wraps a TextField
and integrates it with the enclosing Form
. This provides additional functionality, such as validation and integration with other FormField
widgets.
TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
),
Interactive example
#For more information on input validation, see the Building a form with validation recipe.
Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2025-02-12. View source or report an issue.