Skip to Content
Forui 0.17.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(
  control: FTextFieldControl.managed(initial: TextEditingValue(text: '...')),
  style: (style) => style.copyWith(...),
  label: const Text('Email'),
  hint: 'john@doe.com',
  description: const Text('Enter your email associated with your Forui account.'),
  keyboardType: TextInputType.emailAddress,
  textCapitalization: TextCapitalization.none,
  enabled: true,
  clearable: (value) => value.text.isNotEmpty,
  onSaved: (value) {},
  onReset: () {},
  validator: (value) => null,
  autovalidateMode: AutovalidateMode.onUserInteraction,
  forceErrorText: 'Error',
  errorBuilder: (context, error) => Text(error),
);

FTextFormField.email(...)

FTextFormField.email(
  control: FTextFieldControl.managed(initial: TextEditingValue(text: '...')),
  style: (style) => style.copyWith(...),
  hint: 'john@doe.com',
  description: const Text('Enter your email associated with your Forui account.'),
  enabled: true,
  clearable: (value) => value.text.isNotEmpty,
  onSaved: (value) {},
  onReset: () {},
  validator: (value) => null,
  autovalidateMode: AutovalidateMode.onUserInteraction,
  forceErrorText: 'Error',
  errorBuilder: (context, error) => Text(error),
);

FTextFormField.password(...)

FTextFormField.password(
  control: FTextFieldControl.managed(initial: TextEditingValue(text: '...')),
  obscureTextControl: FObscureTextControl.managed(),
  style: (style) => style.copyWith(...),
  hint: 'Enter password',
  description: const Text('Enter your password.'),
  enabled: true,
  clearable: (value) => value.text.isNotEmpty,
  onSaved: (value) {},
  onReset: () {},
  validator: (value) => null,
  autovalidateMode: AutovalidateMode.onUserInteraction,
  forceErrorText: 'Error',
  errorBuilder: (context, error) => Text(error),
);

FTextFormField.multiline(...)

FTextFormField.multiline(
  control: FTextFieldControl.managed(initial: TextEditingValue(text: '...')),
  style: (style) => style.copyWith(...),
  label: const Text('Description'),
  hint: 'Enter description',
  description: const Text('Enter your description.'),
  enabled: true,
  clearable: (value) => value.text.isNotEmpty,
  onSaved: (value) {},
  onReset: () {},
  validator: (value) => null,
  autovalidateMode: AutovalidateMode.onUserInteraction,
  forceErrorText: 'Error',
  errorBuilder: (context, error) => Text(error),
);
Last updated on
Text FieldTime Field