Text Field

Examples

Basic Usage
With Icons & Affixes
Input Types
Error States

NeoTextField(
  controller: controller, // Using e.g. useTextEditingController() hook
  onChanged: (value) {
    // Handle input
  },
),

NeoTextField(
  controller: controller, // Using e.g. useTextEditingController() hook
  label: "Full Name",
  placeholder: "Enter your full name",
  onChanged: (value) {
    // Handle input
  },
),

NeoTextField(
  controller: controller, // Using e.g. useTextEditingController() hook
  label: "Username",
  placeholder: "Choose a username",
  description: "Must be at least 3 characters long",
  onChanged: (value) {
    // Handle input
  },
),

NeoTextField(
  controller: controller, // Using e.g. useTextEditingController() hook
  icon: PhosphorIconsRegular.magnifyingGlass,
  placeholder: "Search products...",
  onChanged: (value) {
    // Handle input
  },
),

NeoTextField(
  controller: controller, // Using e.g. useTextEditingController() hook
  label: "Price",
  prefix: "€",
  placeholder: "0.00",
  keyboardType: .numberWithOptions(decimal: true),
  onChanged: (value) {
    // Handle input
  },
),

NeoTextField(
  controller: controller, // Using e.g. useTextEditingController() hook
  label: "Weight",
  suffix: "kg",
  placeholder: "0.00",
  keyboardType: .numberWithOptions(decimal: true),
  onChanged: (value) {
    // Handle input
  },
),

NeoTextField(
  controller: controller, // Using e.g. useTextEditingController() hook
  label: "Email Address",
  icon: PhosphorIconsRegular.envelope,
  keyboardType: .emailAddress,
  autofillHints: [AutofillHints.email],
  placeholder: "you@example.com",
  onChanged: (value) {
    // Handle input
  },
),

NeoTextField(
  controller: controller, // Using e.g. useTextEditingController() hook
  label: "Password",
  icon: PhosphorIconsRegular.lock,
  obscureText: true,
  autofillHints: [AutofillHints.password],
  placeholder: "Enter your password",
  onChanged: (value) {
    // Handle input
  },
),

NeoTextField(
  controller: controller, // Using e.g. useTextEditingController() hook
  label: "Email Address",
  icon: PhosphorIconsRegular.envelope,
  keyboardType: .emailAddress,
  placeholder: "you@example.com",
  errorText: "Please enter a valid email address",
  onChanged: (value) {
    // Handle input
  },
),

Properties

Required

TextEditingController

required

The controller for the text field that manages the text being edited.

Content

String

The label text displayed above the text field.

String

default:"Type here..."

The placeholder text shown when the field is empty.

String

Additional descriptive text displayed below the field. Useful for providing context or input requirements.

String

Text displayed at the beginning of the input area (e.g., ”€”, “https://”).

String

Text displayed at the end of the input area (e.g., “.com”, “kg”).

Object?

An optional icon displayed at the beginning of the field. Pass a Phosphor icon from phosphoricons_flutter (e.g. PhosphorIconsRegular.magnifyingGlass).

Layout

bool

default:"true"

Whether the text field should display a border. When false, creates a borderless input suitable for inline editing.

bool

default:"true"

Whether the text field should have internal padding. When false, removes padding for custom layouts.

bool

default:"false"

Whether to show a clear button (x) that allows users to quickly clear the text field content.

Input Configuration

TextInputType

The type of keyboard to display for text input (e.g., .emailAddress, .phone).

List<TextInputFormatter>

Optional input formatters to restrict or modify input (e.g., length limits, character filters).

List<String>

Hints for autofill services to provide appropriate suggestions (e.g., [AutofillHints.email]).

bool

default:"false"

Whether to hide the text being entered. Typically used for password fields.

State

String

Error message to display below the field. When provided, the field appears in an error state with red styling. To remove the error, set this to null.

FocusNode

Focus node for managing focus state programmatically. When not provided, the widget creates its own internal focus node.

bool

default:"true"

Controls whether the text field is interactive. When false, the field dims, ignores input and focus, and shows a forbidden cursor.

Callbacks

ValueChanged<String>

Callback function called whenever the text changes. Receives the current text value.

ValueChanged<String>

Callback function called when the user submits the text (e.g., pressing Enter). Receives the current text value.

VoidCallback

Callback function called when the field loses focus. Useful for explicit blur event handling.

bool

default:"false"

Whether to keep focus on the field after submission. Useful for forms where users might submit multiple times (e.g. a chat input).

Best Practices

Set keyboardType and autofillHints to match the value, such as email or a phone number.

Behavior

The field needs a bounded width.

Getting Started

AI

Widgets

Layouts

Theming

Utilities

Text Field

Examples

Properties

Required

Content

Layout

Input Configuration

State

Callbacks

Best Practices

Behavior

​Examples

​Properties

​Required

​Content

​Layout

​Input Configuration

​State

​Callbacks

​Best Practices

​Behavior

Examples

Properties

Required

Content

Layout

Input Configuration

State

Callbacks

Best Practices

Behavior