Text input is another component that is vital to most apps. It allows the user of the app to enter text and allows us as programmers to use the text in various ways. For example, we need users to input text for making logins and usernames for social media or games.

In this section, we will be creating a basic app that asks for the user’s name, and then shows “Hi, (name)” on the screen. This will be done using the button component, the label component, and the text input component.

First, drag a button onto Screen1. Now in the properties column, change Text to “Press to say hi!”

Next, drag a text input component onto Screen1. It should appear above the button. Navigate to the properties column, and set Hint to “Enter your name here:” The hint is text that will appear for the user to see when they have typed nothing in the box.

You may notice that the text input component sits very close to the button. We can create some space by going into the properties column and finding the Margin property. Set the bottom margin to 10px, as shown in the image below:

Now, drag a label onto the screen, above the text input. Set the Text to “empty string” by deleting all the text. Scroll down in the properties column to the Margin property, and set the bottom margin to 100px.

Your screen should now look like this:

You can now navigate to the Blocks tab where we will begin with the coding.

Under Button1 on the left-hand side, drag a “when Button1 Click” block onto the screen:

Under Label1, select a “from Label1 set text to Label” block:

Drag this block into the other one, to create a block that looks like this:

Now, under the Text category, grab a “join” block, and drag it into the green block, replacing the pink “label” block with the red “join” block. 

Change the text in the first block to “Hi, “. Notice the space on the end of that text. That is important as join doesn’t add spaces, so for the label to look correct we need to add a space.

Under Text_Input1 grab the “from Text_Input1 get Text” and put it in the second half of the join block. This green block is going to be whatever is typed in Text_Input1. Your blocks should look like below:

Your app is now done! Live test in on your phone or in your browser and enter your name! Once you are ready, move onto the next lesson.