> ## 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": "##/##/####" } ] } ``` ## 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" } } } ```