> ## Documentation Index > Fetch the complete documentation index at: https://docs.stac.dev/llms.txt > Use this file to discover all available pages before exploring further. # TextFormField > Documentation for TextFormField export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/"; export const textFormFieldPreviewJson = { "type": "textFormField", "id": "date", "autovalidateMode": "onUserInteraction", "inputFormatters": [{ "type": "mask", "rule": "\\d", "mask": "##/##/####" }], "style": { "fontSize": 16, "fontWeight": "w400", "height": 1.5 }, "decoration": { "labelText": "Date of birth", "hintText": "DD/MM/YYYY", "floatingLabelBehavior": "always", "filled": true, "fillColor": "#FFFFFF", "border": { "type": "outlineInputBorder", "borderRadius": 8, "color": "#24151D29" } } }; export const textFormFieldPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`; The Stac TextFormField allows you to build a Flutter TextFormField widget using JSON. To know more about the TextFormField widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/TextFormField-class.html). ## Properties | Property | Type | Description | | ----------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | | id | `String` | The identifier for the text form field. | | compareId | `String` | The identifier to compare with another text form field. | | decoration | `StacInputDecoration` | The decoration to show around the text form field. | | initialValue | `String` | The initial value of the text form field. | | keyboardType | `StacTextInputType` | The type of keyboard to use for editing the text. | | textInputAction | `StacTextInputAction` | The action button to use for the keyboard. | | textCapitalization | `StacTextCapitalization` | How the text should be capitalized. Defaults to `TextCapitalization.none`. | | style | `StacTextStyle` | The style to use for the text. | | textAlign | `StacTextAlign` | How the text should be aligned. Defaults to `TextAlign.start`. | | textAlignVertical | `StacTextAlignVertical` | How the text should be aligned vertically. | | textDirection | `StacTextDirection` | The direction of the text. | | readOnly | `bool` | Whether the text form field is read-only. Defaults to `false`. | | showCursor | `bool` | Whether to show the cursor. | | autofocus | `bool` | Whether the text form field should focus itself if nothing else is already focused. Defaults to `false`. | | obscuringCharacter | `String` | The character to use for obscuring text. Defaults to `•`. | | maxLines | `int` | The maximum number of lines for the text. | | minLines | `int` | The minimum number of lines for the text. | | maxLength | `int` | The maximum number of characters for the text. | | obscureText | `bool` | Whether to obscure the text. | | autocorrect | `bool` | Whether to enable autocorrect. Defaults to `true`. | | smartDashesType | `StacSmartDashesType` | The type of smart dashes to use. | | smartQuotesType | `StacSmartQuotesType` | The type of smart quotes to use. | | maxLengthEnforcement | `StacMaxLengthEnforcement` | How the max length limit should be enforced. | | expands | `bool` | Whether the text form field should expand to fill its parent. Defaults to `false`. | | keyboardAppearance | `StacBrightness` | The appearance of the keyboard. | | scrollPadding | `StacEdgeInsets` | The amount of space by which to inset the text form field when scrolling. Defaults to `StacEdgeInsets(bottom: 20, top: 20, left: 20, right: 20)`. | | restorationId | `String` | The restoration ID to save and restore the text form field's state. | | enableIMEPersonalizedLearning | `bool` | Whether to enable personalized learning in the IME. Defaults to `true`. | | enableSuggestions | `bool` | Whether to enable suggestions. Defaults to `true`. | | enabled | `bool` | Whether the text form field is enabled. | | cursorWidth | `double` | The width of the cursor. Defaults to `2`. | | cursorHeight | `double` | The height of the cursor. | | cursorColor | `StacColor` | The color of the cursor. | | hintText | `String` | The hint text to display. | | autovalidateMode | `StacAutovalidateMode` | The mode to use for autovalidation. | | inputFormatters | `List` | The list of input formatters to apply to the text. Defaults to an empty list. | | validatorRules | `List` | The list of validator rules to apply to the text. Defaults to an empty list. | ## StacInputDecoration `decoration` supports Flutter input decoration fields such as `labelText`, `hintText`, `prefixIcon`, `suffixIcon`, borders, fill colors, and `floatingLabelBehavior`. | Property | Type | Description | | --------------------- | -------- | ---------------------------------------------------------------------------- | | floatingLabelBehavior | `String` | Controls when the label floats. Supported values: `auto`, `always`, `never`. | ## Input Formatters Use `inputFormatters` to restrict or transform user input. The supported formatter `type` values are `allow`, `deny`, and `mask`. | Property | Type | Description | | -------- | -------- | ---------------------------------------------------------------------------- | | type | `String` | Formatter type: `allow`, `deny`, or `mask`. | | rule | `String` | Regular expression used by the formatter. | | mask | `String` | Mask pattern used when `type` is `mask`; `#` consumes matching input values. | ```json theme={null} { "inputFormatters": [ { "type": "mask", "rule": "\\d", "mask": "##/##/####" } ] } ``` ## Validator Rules Use `validatorRules` to validate user input. Each entry is a `StacFormFieldValidator` with a `rule`, an optional `message` shown when validation fails, and an optional `options` map for parameterized rules. | Property | Type | Description | | -------- | -------- | ------------------------------------------------------------------------------------ | | rule | `String` | The validator to apply (see below). | | message | `String` | Error message shown when validation fails. Defaults to `Invalid input` when omitted. | | options | `Map` | Arguments for parameterized rules. Ignored by rules that take no arguments. | Validators are powered by the [`flutter_validators`](https://pub.dev/packages/flutter_validators) package. `flutter_validators` treats an empty string as invalid (e.g. `isEmail('')` is `false`), so **any field with `validatorRules` is effectively required** — an empty value fails validation. There is no built-in "validate only when filled" option. For an optional field, omit `validatorRules`; if you need conditional validation, handle the blank-input check in your app before applying the rules. **No-argument rules:** `isAlpha`, `isAlphanumeric`, `isAscii`, `isBase32`, `isBase58`, `isBoolean`, `isCreditCard`, `isDate`, `isDecimal`, `isEmail`, `isFQDN`, `isHexColor`, `isHexadecimal`, `isInt`, `isIP`, `isJson`, `isJWT`, `isLatLong`, `isLowercase`, `isMACAddress`, `isMD5`, `isMongoId`, `isNumeric`, `isOctal`, `isPhone`, `isPort`, `isSemVer`, `isSlug`, `isUppercase`, `isURL`, `isUUID`. **Parameterized rules** (read arguments from `options`): | Rule | Options | | ------------------ | ----------------------------------------------------------------------- | | `isLength` | `min` (int), `max` (int, optional) | | `isByteLength` | `min` (int), `max` (int, optional) | | `isFloat` | `min` (double, optional), `max` (double, optional) | | `isBase64` | `urlSafe` (bool) | | `isStrongPassword` | `minLength`, `minLowercase`, `minUppercase`, `minNumbers`, `minSymbols` | | `contains` | `seed` (String), `ignoreCase` (bool), `minOccurrences` (int) | | `equals` | `comparison` (String) | | `isIn` | `values` (List of String) | | `matches` | `pattern` (String) — a raw regular expression | | `compare` | `fieldId` (String) — id of another field to compare values with | The `matches` rule matches the pattern *anywhere* in the value, so anchor it with `^...$` for a full-string match. The `compare` rule is useful for confirm-password fields. Remember that every rule fails on empty input, so a field carrying any of these rules is treated as required. ```json theme={null} { "type": "textFormField", "id": "password", "obscureText": true, "validatorRules": [ { "rule": "isStrongPassword", "message": "Use a stronger password" }, { "rule": "isLength", "options": { "min": 8, "max": 32 }, "message": "Password must be 8-32 characters" } ] } ``` ## Example ```dart theme={null} StacTextFormField( id: 'date', autovalidateMode: StacAutovalidateMode.onUserInteraction, inputFormatters: [ StacInputFormatter( type: StacInputFormatterType.mask, rule: r'\d', mask: '##/##/####', ), ], style: StacTextStyle(fontSize: 16, fontWeight: StacFontWeight.w400, height: 1.5), decoration: StacInputDecoration( labelText: 'Date of birth', hintText: 'DD/MM/YYYY', floatingLabelBehavior: 'always', filled: true, fillColor: StacColors.white, border: StacOutlineInputBorder(borderRadius: 8, color: '#24151D29'), ), ) ``` ```json theme={null} { "type": "textFormField", "id": "date", "autovalidateMode": "onUserInteraction", "inputFormatters": [ { "type": "mask", "rule": "\\d", "mask": "##/##/####" } ], "style": { "fontSize": 16, "fontWeight": "w400", "height": 1.5 }, "decoration": { "labelText": "Date of birth", "hintText": "DD/MM/YYYY", "floatingLabelBehavior": "always", "filled": true, "fillColor": "#FFFFFF", "border": { "type": "outlineInputBorder", "borderRadius": 8, "color": "#24151D29" } } } ```