Form

Text Field

A text field lets the user enter text, either with a hardware keyboard or with an onscreen keyboard.

API Reference

See FTextFormField for using text fields in forms.

CLI

To generate a specific style for customization:

dart run forui style create text-field-sizes

Usage

FTextField(...)

1FTextField(
2 size: .md,
3 style: const .delta(contentPadding: .value(.symmetric(horizontal: 10))),
4 enabled: true,
5 label: const Text('Label'),
6 hint: 'Enter text...',
7 description: const Text('Description'),
8 error: null,
9)

FTextField.email(...)

1FTextField.email(
2 size: .md,
3 style: const .delta(contentPadding: .value(.symmetric(horizontal: 10))),
4 enabled: true,
5 label: const Text('Email'),
6 hint: 'Enter email...',
7 description: const Text('Description'),
8 error: null,
9)

FTextField.password(...)

1FTextField.password(
2 size: .md,
3 style: const .delta(contentPadding: .value(.symmetric(horizontal: 10))),
4 enabled: true,
5 label: const Text('Password'),
6 hint: 'Enter password...',
7 description: const Text('Description'),
8 error: null,
9)

FTextField.multiline(...)

1FTextField.multiline(
2 size: .md,
3 style: const .delta(contentPadding: .value(.symmetric(horizontal: 10))),
4 statesController: null,
5 enabled: true,
6 label: const Text('Label'),
7 hint: 'Enter text...',
8 description: const Text('Description'),
9 error: null,
10)

Examples

States

Enabled

Disabled

Clearable

Presets

Email

Password

Multiline

Switch

A toggle switch component that allows users to enable or disable a setting with a sliding motion.

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.

On this page

CLIUsageFTextField(...)FTextField.email(...)FTextField.password(...)FTextField.multiline(...)ExamplesStatesEnabledDisabledClearablePresetsEmailPasswordMultiline