Form
Text Field
A text field lets the user enter text, either with a hardware keyboard or with an onscreen keyboard.
See FTextFormField for using text fields in forms.
FTextField(
enabled: true,
label: const Text('Username'),
hint: 'JaneDoe',
description: const Text('Please enter your username.'),
);CLI
To generate and customize this style:
dart run forui style create text-fieldUsage
FTextField(...)
FTextField(
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.'),
error: const Text('Error'),
keyboardType: TextInputType.emailAddress,
textCapitalization: TextCapitalization.none,
enabled: true,
clearable: (value) => value.text.isNotEmpty,
maxLines: 1,
);Examples
States
Enabled
FTextField(
enabled: true,
label: const Text('Username'),
hint: 'JaneDoe',
description: const Text('Please enter your username.'),
);Disabled
FTextField(
enabled: false,
label: const Text('Username'),
hint: 'JaneDoe',
description: const Text('Please enter your username.'),
);Clearable
FTextField(
control: const FTextFieldControl.managed(initial: TextEditingValue(text: 'MyUsername')),
label: const Text('Username'),
hint: 'JaneDoe',
description: const Text('Please enter your username.'),
clearable: (value) => value.text.isNotEmpty,
);Presets
FTextField.email(
control: FTextFieldControl.managed(initial: TextEditingValue(text: 'jane@doe.com')),
);Password
FTextField.password(
control: FTextFieldControl.managed(initial: TextEditingValue(text: 'My password')),
);Multiline
FTextField.multiline(label: const Text('Leave a review'), maxLines: 4);