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 andTextFormField.

TextField is the most commonly used text input widget.

By default, aTextField is decorated with an underline. You can add a label, icon, inline hint text, and error text by supplying anInputDecoration as thedecoration property of theTextField. To remove the decoration entirely (including the underline and the space reserved for the label), set thedecoration to null.

TextField(decoration:InputDecoration(border:OutlineInputBorder(),hintText:'Enter a search term',),),

To retrieve the value when it changes, see theHandle changes to a text field recipe.

TextFormField wraps aTextField and integrates it with the enclosingForm. This provides additional functionality, such as validation and integration with otherFormField widgets.

TextFormField(decoration:constInputDecoration(border:UnderlineInputBorder(),labelText:'Enter your username',),),

import 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget {  const MyApp({super.key});  @override  Widget build(BuildContext context) {    const appTitle = 'Form Styling Demo';    return MaterialApp(      title: appTitle,      home: Scaffold(        appBar: AppBar(title: const Text(appTitle)),        body: const MyCustomForm(),      ),    );  }}class MyCustomForm extends StatelessWidget {  const MyCustomForm({super.key});  @override  Widget build(BuildContext context) {    return Column(      crossAxisAlignment: CrossAxisAlignment.start,      children: <Widget>[        const Padding(          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),          child: TextField(            decoration: InputDecoration(              border: OutlineInputBorder(),              hintText: 'Enter a search term',            ),          ),        ),        Padding(          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),          child: TextFormField(            decoration: const InputDecoration(              border: UnderlineInputBorder(),              labelText: 'Enter your username',            ),          ),        ),      ],    );  }}

For more information on input validation, see theBuilding a form with validation recipe.