📐
Thunkable Docs
Build an AppDrag and Drop DocsSnap to Place Docs
Snap to Place
Snap to Place
  • 👋Welcome to Thunkable Docs
  • 👶Getting Started
    • Signing In
    • Your Thunkable Projects Page
    • Tutorials
    • Live Test your App
  • 🆕Create New Project
    • Project Settings
    • Project Assets and Sizes
  • Thunkable Sample Projects
  • Public Gallery of Projects
  • 🛠️ Components
  • 🔘User Interface
  • Button
  • Label
  • Text Input
  • List Viewer
  • Web Viewer
  • Switch
  • Slider
  • Alert
  • Loading Icon
  • Date Input
  • Time Input
  • PDF Reader
  • Rating
  • 📊Data Viewers
  • Data Viewer List
  • Data Viewer Grid
  • Custom Data Viewer Layout
  • Data Sources
  • 📐Layout
  • Top Tab Navigator
  • Bottom Tab Navigator
  • Stack Navigator
  • Drawer Navigator
  • Screen
  • Row
  • Column
  • 📷 Image
  • Image
  • Photo Library
  • Camera
  • Barcode Scanner
  • Image Recognizer
  • Animation by Lottie
  • Video
  • Video Recorder
  • 🗄️ Data
  • Local Storage
  • Local DB
  • Realtime DB by Firebase
  • Airtable
  • Media DB by Cloudinary
  • File Picker
  • Web API
  • 🌍Location
  • Maps by Google and Apple
  • Location Sensor
  • 💲Monetization
  • Ads by AdMob
  • In-App Purchase
  • 🌐Sensors
  • Gyroscope
  • Magnetometer
  • Accelerometer
  • Timer
  • Bluetooth Low Energy
  • 🔊Voice
  • Sound
  • Text to Speech
  • Speech Recognizer
  • Translator
  • Audio Recorder
  • 🤝Social
  • Share
  • Email Sign In by Firebase
  • Push Notifications by One Signal
  • 🎮Gaming
  • Canvas
  • Sprites
  • Sprite Gallery
  • Canvas Label
  • 🤖Gaming Blocks🎮
  • Events
  • Motion
  • Looks
  • Direction
  • Sensing
  • Add & Remove
  • Stage
  • Canvas Label
  • 🤖Blocks
  • Control
  • Logic
  • Math
  • Text
  • Lists
  • Color
  • Objects
  • Device
  • Variables
  • Functions
  • "Any Component" Blocks
  • 🖥️ App Services & Emulators
  • 🔒App Data Privacy
  • ➕Make Copy
  • 📥Download
  • 📤Share
  • 📱Publish
  • Publish to App Store (iOS)
    • TestFlight Overview
      • TestFlight in Depth
  • Publish to Play Store (Android) with AAB
  • Publish as a Web App
  • Generate Screenshots
  • 🔎Troubleshooting
    • Login Issues
    • FAQs
  • 📏Intro to Spacing
  • 🖼️ Intro to Sizing
  • 🔤Fonts
  • 💾Managing Storage
  • 📝Bugs and Product Feedback
  • Snap to Place Hour of Code Videos
Powered by GitBook
On this page
  • Set Keyboard type
  • Set up for Passwords
  • Style the Text Input
  • Edit the Text Input size
  • Add spacing
  • Events
  • Click
  • Unfocus
  • Submit
  • Changes
  • Properties
  • Border Width
  • Height
  • Hint
  • Keyboard Type
  • Text
  • Visible
  • Width

Was this helpful?

Export as PDF

Text Input

The text input allows the person using your app to type in anything that they want such as words, passwords or numbers.

PreviousLabelNextList Viewer

Last updated 2 years ago

Was this helpful?

Set Keyboard type

You can choose from the following types of keyboards:

  • Default keyboard: Displays your device’s default keyboard

  • Email Address: Displays an alphanumeric keyboard to accept email addresses

  • Numeric: Displays a keypad with only numbers; It is similar to the phone pad keyboard

  • Phone Pad: Displays a telephone keypad; It is similar to the numeric keyboard

Set up for Passwords

You can also set up Text Input for passwords as shown below using the Secure Text Entry Switch. This switch will replace text with * as users type.

To activate Secure Text Entry, look for the Text Input Style properties and make sure that the Secure Text Entry switch is set to true.

Style the Text Input

You can customize the Text Input component with the following properties:

  • Hint: Hint text that disappears when the user starts typing into the Text Input

  • Text: Text that appears on the text input

  • Visible: To see the text input in your app, set the switch to true

  • Border

    • Width: Enter how wide you want the border outline of the text input to be

    • Color: Pick a color for the border of the text input

    • Style: Select if you want the border to be a dotted, dashed or solid line

    • Radius: Enter how round you want the edges of the border for the text input to be

Edit the Text Input size

You can set how tall the text input is using the Height property and set how wide the text input is using the Width property.

Height

  • Fill container - The text input fills the entire screen vertically

  • Fit contents (Recommended) - The text input’s height changes to fit the contents it contains

  • Relative size - The text input fills the specified percentage of the screen

  • Absolute size - Sizes the text input to a specified number of pixels

Width

  • Fill container - The text input fills the entire screen horizontally

  • Fit contents - The text input’s width changes to fit the contents it contains

  • Relative size - The text input fills the specified percentage of the screen

  • Absolute - Sizes the text input to a specified number of pixels

Add spacing

You change the spacing and positioning of the text input with the Margin and Padding properties. Margin

  • You can specify how much space you want between the edges of the text input and the screen using either pixel or percent values.

Padding

  • You can specify how much space you want between the border and the contents of the text input using either pixel or percent values.

Events

Click

This event fires when the user clicks on the Text Input component.

Unfocus

This event fires when the component looses focus, i.e the user clicks on another component.

Submit

This event fires when the enter or submit button is pressed on the device keyboard.

Changes

This event fires every time a character is added or removed to the Text Input.

Properties

Border Width

Height

The set and get height blocks work with the Height property of the Text Input component. Acceptable input values are.

  • Number of Pixels

  • Percentage Height

  • "Fit Contents"

  • "Fill Container"

The Computed Height block returns the on-screen dimensions of the Text Input, after it has been rendered on the device screen. The value returned is an integer, representing the size of the component, in pixels.

Hint

The set and get hint work with the prompt that is displayed in the Text Input, before the user starts typing. Any string of text or number can be used as the hint.

Keyboard Type

The set and get keyboard type property gives you control over what version of the keyboard is displayed on-screen when the user starts typing. Acceptable values are:

  • default

  • email address

  • numeric

  • phone pad

Text

The set and get text property works with the string of text that displayed in the Text Input.

Visible

The set and get visible blocks are used to show or hide the entire Text Input component. Acceptable values are:

  • True

  • False

Width

The set and get width blocks work with the Width property of the Text Input component. Acceptable values are.‌

  • Number of Pixels

  • Percentage Width

  • "Fit Contents"

  • "Fill Container"

The Computed Width block returns the on-screen dimensions of the Text Input, after it has been rendered on the device screen. The value returned is an integer, representing the size of the component, in pixels.

The border width value corresponds to the size of the border around the Text Input. Changes to the color and style of the border must be done in the

designer.