Text Field

Examples

Basic Usage
With Icons & Affixes
Input Types
Error States

Basic text field example — Basic text field with different states and features.

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
  },
),

Text field types example — Different input types and specialized configurations.

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
  },
),

Text field error states example — Text field validation and error handling.

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”).

PhosphorIconData

An optional icon displayed at the beginning of the field. Use PhosphorIconsRegular.iconName.

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

Width Constraints: Always provide width constraints to prevent layout issues by wrapping in ConstrainedBox, SizedBox, Expanded, etc.
Input Types: Always set appropriate keyboardType and autofillHints for better user experience on mobile devices.
Placeholders: Use placeholder text to show examples or provide additional context about the expected input format.

Integration Notes

Focus Management: The text field automatically handles focus states and provides visual feedback when active.

Getting Started

AI

Neo CLI

Widgets

Layouts

Theming

Utilities

Text Field

Examples

Properties

Required

Content

Layout

Input Configuration

State

Callbacks

Best Practices

Integration Notes

​Examples

​Properties

​Required

​Content

​Layout

​Input Configuration

​State

​Callbacks

​Best Practices

​Integration Notes

Examples

Properties

Required

Content

Layout

Input Configuration

State

Callbacks

Best Practices

Integration Notes