Digia Academy
Digia StudioDiscordLinkedIn
  • Introduction
    • FAQs
  • What's New
    • 2024
      • March
  • DIGIA STUDIO INTRODUCTION
    • Dashboard
    • Builder Tool
      • Navigation Menu
      • Tool Bar
      • Pages and Widgets Panel
      • Canvas Area
      • Properties Panel
    • Creating a New Project
    • Creating new Pages
    • Working with Widget Tree
    • Build Your First App
      • Hello World
      • Bytes App
        • Onboarding
        • Defining API Calls
        • Courses
        • Articles
        • Viewing your App
    • SDK Integration
      • Insert Single Pages from Digia Studio
  • Actions
    • Call API Rest Action
    • Call Rest API
    • Pop Current
    • Pop to Route
    • openUrl
    • Go To Page
    • Post Message
    • Set Page State
    • Wait (delay)
    • Drawer
    • Toast
    • Open Dialog
    • Share
    • Copy to Clipboard
  • Operations
    • API Call
    • Operators
      • Json Operators
      • Logical Operators
      • Date Time Operators
      • Math Operators
      • String Operations
  • BUILDING UI
    • Widgets
      • Form Widgets
        • PinField
        • Calendar
        • Text Form Field
      • Base Widgets
        • Animated Button
        • Check Box
        • Video Player
        • Spacer
        • Stack
        • Wrap
        • Text
        • Avatar
        • Rich Text
        • Image
        • Button
        • Icon
        • Switch
        • Sized Box
        • HtmlView
        • Lottie Animation
        • Linear Progress Bar
        • YouTube Player
        • Circular Progress Bar
      • Layout Widgets
        • ListView
        • Web View
        • Future Builder
        • Conditional Builder
        • Stream Builder
        • GridView
        • Column
        • Row
        • Container
        • Expandable
        • Divider (Horizontal)
        • Divider (Vertical)
        • Carousel
      • Persistent Footers Widgets
        • NavigationBar Widget
      • Page Widgets
        • Stepper Widget
        • Scaffold Widget
        • Paginated Listview Widget
        • TabView
        • AppBar
      • Widget Commonalities
    • Event Handlers
  • Theme
    • Colors
    • Typography
  • DATA AND BACKEND
    • API Calls
      • Setting up API Calls
      • Create API Calls
      • Import API From Curl
  • DEPLOYING YOUR APP
    • Deployment
    • Release History
  • Settings
    • App Settings
    • App Assets
    • Media Assets
  • JARGON
    • Data integration
Powered by GitBook
On this page
  • Adding Text Form Field Widget
  • Text form field Key Elements
  • Configuring the Text form field Widget
  • Basic Properties:
  • Input Types:
  • Styling:
  • Behavior:
  1. BUILDING UI
  2. Widgets
  3. Form Widgets

Text Form Field

PreviousCalendarNextBase Widgets

Last updated 10 months ago

The Text Form Field widget is used to create a text input field in your app. This widget is essential for collecting user input, such as names, email addresses, passwords, and other text-based data.

Adding Text Form Field Widget

  1. In the Widget Tree builder, you can pick and insert the Text Form Field widget from the widget panel onto your canvas.

  2. Positioning: Place the Text Form Field widget where you want it in your layout. You can use the layout properties to adjust its position and size.

Text form field Key Elements

  • Prefix: Use to Insert any Elements (Icon, image) before the Text form field.

  • Suffix: Use to Insert any or a set of Widgets (Icon, image) after the Text form field.

Configuring the Text form field Widget

Basic Properties:

  • Label Text: Set a label for your text field, which will appear above the input.

  • Hint Text: Add hint text to provide a placeholder inside the text field.

Input Types:

  • Text Input Type: Specify the type of keyboard that appears (e.g., text, email, number, password).

Styling:

Behavior:

  • Read-Only: Make the text field read-only if you don’t want users to edit the text.

  • Enabled: Control whether the text field is enabled or disabled.

Customize the font, size, color, and other text properties.

Add borders, icons, and other decorations to the text field.

Adjust the padding and margin to control the spacing around the text field.

Text Style:
Decoration:
Padding and Margin: