Skip to main content

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

​
Properties

​
Required

​
controller
TextEditingController
required
The controller for the text field that manages the text being edited.

​
Content

​
label
String
The label text displayed above the text field.
​
placeholder
String
default:"Type here..."
The placeholder text shown when the field is empty.
​
description
String
Additional descriptive text displayed below the field. Useful for providing context or input requirements.
​
prefix
String
Text displayed at the beginning of the input area (e.g., ”€”, “https://”).
​
suffix
String
Text displayed at the end of the input area (e.g., “.com”, “kg”).
​
icon
PhosphorIconData
An optional icon displayed at the beginning of the field. Use PhosphorIconsRegular.iconName.

​
Layout

​
hasBorder
bool
default:"true"
Whether the text field should display a border. When false, creates a borderless input suitable for inline editing.
​
hasPadding
bool
default:"true"
Whether the text field should have internal padding. When false, removes padding for custom layouts.

​
Input Configuration

​
keyboardType
TextInputType
The type of keyboard to display for text input (e.g., TextInputType.emailAddress, TextInputType.phone).
​
inputFormatters
List<TextInputFormatter>
Optional input formatters to restrict or modify input (e.g., length limits, character filters).
​
autofillHints
List<String>
Hints for autofill services to provide appropriate suggestions (e.g., [AutofillHints.email]).
​
obscureText
bool
default:"false"
Whether to hide the text being entered. Typically used for password fields.

​
State

​
errorText
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
FocusNode
Focus node for managing focus state programmatically. When not provided, the widget creates its own internal focus node.
​
isEnabled
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

​
onChanged
ValueChanged<String>
Callback function called whenever the text changes. Receives the current text value.
​
onSubmitted
ValueChanged<String>
Callback function called when the user submits the text (e.g., pressing Enter). Receives the current text value.
​
maintainFocusOnSubmit
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.
⌘I