Skip to Content
Forui 0.12.0 is released 🎉
DocumentationFormText Form Field

Text Form Field

A text field that can be used in forms, allowing the user to enter text, either with a hardware keyboard or with an onscreen keyboard.

API Reference

FTextFormField wraps FTextField and provides a FormField.

CLI

To generate and customize this style:

dart run forui style create text-field

Usage

FTextFormField(...)

FTextFormField(
  controller: _controller, // TextEditingController
  style: FTextFieldStyle(...),
  clearable: (value) => value.text.isNotEmpty,
  enabled: true,
  onSaved: (value) {},
  validator: (value) => true,
  label: const Text('Email'),
  hint: '[email protected]',
  description: const Text('Enter your email associated with your Forui account.'),
  forceErrorText: 'Error'
  errorBuilder: (context, error) => const Text(error),
  keyboardType: TextInputType.emailAddress,
  textCapitalization: TextCapitalization.none,
  maxLines: 1,
);

FTextFormField.email(...)

FTextFormField.email(
  controller: _controller, // TextEditingController
  clearable: (value) => value.text.isNotEmpty,
  enabled: true,
  onSaved: (value) {},
  validator: (value) => true,
  label: const Text('Email'),
  hint: '[email protected]',
  description: const Text('Enter your email associated with your Forui account.'),
  forceErrorText: 'Error'
  errorBuilder: (context, error) => const Text(error),
  keyboardType: TextInputType.emailAddress,
  textCapitalization: TextCapitalization.none,
  maxLines: 1,
);

FTextFormField.password(...)

FTextFormField.password(
  controller: _controller, // TextEditingController
  clearable: (value) => value.text.isNotEmpty,
  enabled: true,
  onSaved: (value) {},
  validator: (value) => true,
  label: const Text('Password'),
  hint: 'Enter password',
  description: const Text('Enter your password.'),
  forceErrorText: 'Error'
  errorBuilder: (context, error) => const Text(error),
  keyboardType: TextInputType.visiblePassword,
  textCapitalization: TextCapitalization.none,
  maxLines: 1,
);

FTextFormField.multiline(...)

FTextFormField.multiline(
  controller: _controller, // TextEditingController
  clearable: (value) => value.text.isNotEmpty,
  enabled: true,
  onSaved: (value) {},
  validator: (value) => true,
  label: const Text('Description'),
  hint: 'Enter description',
  description: const Text('Enter your description.'),
  forceErrorText: 'Error'
  errorBuilder: (context, error) => const Text(error),
  keyboardType: TextInputType.multiline,
  textCapitalization: TextCapitalization.none,
  maxLines: null,
);
Last updated on
Text FieldTime Field