Thunkable #6 - Text Input and Label of User Interface full and simple explanation with use

Hello friends, Welcome to the another tutorial of Thunkable, in which we will know about Text Input and Label of UI (User Interface) Category.

Introduction

• Text Input - The Text input, as the name suggests, is the input available to the user of the app, where user can enter some value, which can be text, number, phone number, email address etc.
• Label - The Label is somehow as the Text Input, but the only difference is that, In Text Input, the user can input their own value, whereas label shows a predefined text to the user.

How to add

We can simple drag and drop it to the screen, as shown in the below image.

Note : We add button here to show the text input value after clicking on it. We will show the value in the label.

You can read more about buttons here.

Properties

Text Input

1. you can change the name of the input text, by clicking on the rename icon. (The name is just the unique identifier, which is used by android or ios to know info about the text input).
   
   
   
   
   
2. Hint - The value you enter here, will be shown to the user, if the text input is empty. It is the placeholder value. for e.g. for a text input, which requires user to enter their number, will have this value, "enter your number".
3. Text - This value is shown to the user by default. It is different from "Hint", because, it is editable, whereas "Hint" will shown to the user all the time, when the text input is empty.
4. KeyBoard Type - This sets the input type of the text input i.e. the input type (number, email, text etc.) which can be accepted by the text input. It has 4 values to choose from,

• default - It will accept all values, and show the default keyboard.
• email address - It will accept only email addresses, and show the keyboard related to email, i.e. show "@" on the keyboard, and for some smartphones, ".com" also.
• numeric - It will accept only numbers, and show a numbered only keyboard.
• phone pad - It will accept only phone numbers, and show the numbered keyboard.

5. Height - It sets the height of the text input. It has 3 values to choose from,

• Fit contents, Fill container - Fit contents will sets the height to only occupy the inner text, whereas, Fill container will occupy all the height available on the screen.
• Relative Size - It accepts its value in percentage, that is related to the screen size. If we set its value to 50%, it will set its height to half of the screen, and if 100%, it will occupy whole the available screen.
• Absolute size - It sets the height in pixels.

6.  Width - It sets the width of the text input. It's value is same as the height, the only difference is that instead of setting height, it sets the width.
7. Visible - It sets the visibility. If selected, the text input will be visible to the user, otherwise not.
8. Margin - It sets the margin of the text input i.e spacing between the text input border and the screen border or the neighboring element.
   
   

   

   margin left sets the margin between screen border and text input border,
   margin bottom sets the margin between text input border and button border.

• top - sets the spacing between the top border of text input and top border of the screen or bottom border of the neighboring element.
• bottom - sets the spacing between the bottom border of text input and border border of the screen or top border of the neighboring element.
• left - sets the spacing between the left border of text input and left border of the screen or right border of the neighboring element.
• right - sets the spacing between the right border of text input and right border of the screen or left border of the neighboring element.

9. padding - It sets the padding of the text input i.e. spacing between the inner text and the border of the text input.
   
   

   

   padding top sets the spacing between the inner text and top border,
   padding left sets the spacing between inner text and left border.

• top - sets the spacing between the inner text and the top border.
• bottom - sets the spacing between the inner text and the bottom border.
• left - sets the spacing between the inner text and the left border.
• right - sets the spacing between the inner text and the left border. you can see it when the text input is fully filled.

10. Border - It sets the border of the text input. It has 4 properties to customize.
    
    
    

• width - sets the height of the border.
• color - sets the color of the border. you can select any value from the dialog.
• style - sets the style of the border. solid means the border will be a solid line, dotted means the border will be a dotted line and dashed means the border will be a dashed line.
• border radius - sets the border radius i.e curve of the border. you can experiment with various values to see the output. for a pure curve, you can use 20 as it's value.

Label

1. Text - The text which is shown to user by default.
2. Font Size - It sets the font size of the Label.
3. Number Of Lines - It sets the number of lines, that is visible to the user. It shows ellipsis when the text to be shown is more than the specified line.
   
   
   
   
   
4. Color - It sets the color of Label's text.
5. BackgroundColor - It sets the background color of the Label.
6. Font Style - It sets the font style of the Label's text either italic or normal.
7. Font Weight - It sets, how much the text of label will be thin or thick. you can experiment around different values from the list to find out the value that suits your app. The normal means the font is shown as default, whereas the bold means that the font will be shown thick.
8. Text Align - It sets the text alignment of the Label's text.

• left - The text will be align to left.
• right - The text will be align to right.
• center - The text will be align to center.
• justify - Every line of the label stretches to available width.
  
  
  

9. Height - It sets the height of the label. The available options works same as of text input described above.
10. Width - It sets the width of the label. The available options works same as of text input described above.
11. Visible - If turned on, show the label, otherwise, hide it.
12. Margin - It sets the margin of the label. The available options works same as of text input described above.
13. Padding - It sets the padding of the label. The available options works same as of text input described above.
14. Border - It sets the border of the label. The available options works same as of text input described above. 

Blocks

Text Input

1. from "Text input" set "Hint" to - It sets the value specified here as the hint of Text Input.
2. from "Text input" set "Text" to - It sets the value specified here as the default text shown to the user. It is different from hint, as the text can be edited but the hint can't i.e. hint will always be visible, when the text input is empty.
3. from "Text input" get "Hint" - It returns the value specified as Hint of the Text Input.
4. from "Text input" get "Text" - It returns the value present in the Text Input. for e.g. If we had written "something" inside the text input, this will return "something" as it's value.
5. from "Text input" set "KeyboardType" to - It sets the keyboard type, which should be shown to the user. i.e. The input type accepted by the Text input, among number, email, phone number and default.
6. from "Text input" get "KeyboardType" - It returns the current keyboard type.
7. from "Text input" set "Height" to - It sets the height of the Text input in percent relative to available screen size.
8. from "Text input" set "Width" to - It sets the width of the Text input in percent relative to available screen size.
9. from "Text input" get "Height" - It returns  the current height of the Text input.
10. from "Text input" get "Width" - It returns the current width of the Text input.

• The computed width and height properties returns absolute height, if you had sets the height relatively in percent or either of fill container and fit contents.

11. from "Text input" set "Visible" to - It sets the visibility of the Text input. If sets true, the Text input will be visible otherwise not.
12. from "Text input" get "Visible" - It returns true, if Text input is visible to the user, otherwise false.
13. from "Text input" set "Border Width" to - It sets the height of border of Text input.
14. from "Text input" get "Border Width" - It returns the current height of the Text input's border.

Label

1. from "Label" set "Text" to - It sets the text of Label.
2. from "Label" get "Text" - It returns the current text of Label.
3. from "Label" set "Font Size" to - It sets the size of Label's Text. It sets the font size in pixels.
4. from "Label" get "Font Size" - It returns the current font size of the Label.
5. from "Label" set "Number of Lines" to - It sets the number of line to be visible. If text is more than the number of lines specified, then it is hidden from the user, with (...) at the end.
   
   
   
   
   
6. from "Label" get "Number of lines" - It returns the current value of  "number of lines" property.
7. from "Label" set "Color" to - It sets the color of Label's text.
8. from "Label" get "Color" - It returns the current color of Label's text.
9. from "Label" set "BackgroundColor" to - It sets the background color of Label.
10. from "Label" get "BackgroundColor" - It returns the current background color of Label.
11. from "Label" set "FontStyle" to - It sets the font style of Label, either italic or normal.
12. from "Label" get "FontStyle" - It returns the current font style.
13. from "Label" set "FontWeight" to - It sets, how much the text of Label will be thin or thick. you can experiment around different values. The value between 100 and 500 is below the normal, and above it starts making the text bold.
14. from "Label" get "FontWeight" - It returns the current font weight.
15. from "Label" set "TextAlign" to - It sets the text align of the Label.
16. from "Label" get "TextAlign" - It returns the current text align of Label.
17. from "Label" set "Height" to - It sets the height of Label.
18. from "Label" get "Height" - It returns the current height of Label.
19. from "Label" set "Width" to - It sets the width of Label.
20. from "Label" get "Width" - It returns the current width of Label.

• The computed width and height properties returns absolute height, if you had sets the height relatively in percent or either of fill container and fit contents.

21. from "Label" set "Visible" to - It sets the visibility of Label. If sets true, the Label will be visible otherwise hidden.
22. from "Label" get "Visible" - It returns true, if Label is visible, otherwise false.