Textfield
The TextField widget allows users to input text into your app. You can use the TextField widget for building forms, search, etc.
The Properties Panel can be used to customize the behavior of your Textfield widget.
To perform any action on click, add an Action in the Textfield. You can find the instructions on adding the Action here.
Adding a margin value allows for empty space to surround the decoration and child.
Adding a padding value allows for empty space to inscribe inside the decoration.
To set the value:
- Select the Textfield from the Tree Area.
- Move to the Property Editor and navigate to the Value.
- Insert the value.
Showing a Hint text for Textfield, helps users know what information is needed to enter into the Textfield. For example, showing Hint text as ‘Enter Your Email Here’ clearly informs the user to enter their email.To set the Hint text:
- Select the Textfield from the Tree Area.
- Move to the Property Editor and navigate to the Hint text.
- Find the Hint text property and enter the text.
To change the height and width of the Textfield:
- Select the Textfield from the Tree Area.
- Move to the Property Editor (on the right side of your screen).
- There are two ways to set the Textfield dimensions:
-
- To set to an exact size, select PX and enter the desired values.
- To set the dimensions as a % of the screen size, select % and enter the desired value.
To add a background color to the Textfield:
- Select the Textfield from the Tree Area.
- Move to the Property Editor and navigate to the Fill.
- Enter the color code or simply choose it either from Palette.
Adding a border radius value allows for to change the radius of the corners.
- Select the Calendar from the Tree Area.
- Move to the Property Editor and navigate to the Border Radius.
- Enter the value. By default, the value 0 will be set for all corners which are TL (Top left), TR (top right), BL (bottom left), and BR (bottom right). Click on the link icon () to change each corner separately
Using various properties under the Textfield Text section, you can customize the text of the Textfield widget as per your design.
By default, the Obscure Text is false. You decide to show and hide a text (e.g. password) using the Obscure Text property.To Enable/Disable Obscure Text:
- Select the Textfield from the Tree Area.
- Move to the Property Editor (on the right side of your screen).
- Find the Obscure Text property, enable to obscure the text and show the preview of characters in black dots, disable to show it. Click on it.
By default, the Auto Correct is false. You can enable or disable suggestions for textfield widget.To Enable/Disable Auto Correct:
- Select the Textfield from the Tree Area.
- Move to the Property Editor (on the right side of your screen).
- Find the Auto Correct property, enable to show suggestions. Click on it.
By default, the Show Cursor is true. We can show/hide the textfield cursor by using the Show Cursor property.To Enable/Disable Show Cursor:
- Select the Textfield from the Tree Area.
- Move to the Property Editor (on the right side of your screen).
- Find the Show Cursor property, enable to show the cursor. Click on it.
By default, the Textfield is only one line. When you type in more text than fits on the screen, some text will not be visible. However, you can change this behavior by using the Max Lines property.To change the Textfield Max lines:
- Select the Textfield from the Tree Area.
- Move to the Property Editor and under the Textfield Properties section, scroll down to find the Max Lines property.
- Enter the value 3 in the Max Lines property. This will show the text up to 3 lines.
By default, the Textfield is only one line. you can change the number of initial lines shown on the screen, this affects the height of the field itself and does not limit the number of lines that can be inserted into the field. However, you can change this behavior by using the Min Lines property.To change the Textfield Min lines:
- Select the Textfield from the Tree Area.
- Move to the Property Editor and under the Textfield Properties section, scroll down to find the Min Lines property.
- Enter the value in the Min Lines property.
Adding a Max Length value allows you to limit the maximum number of characters.To change the Textfield Max Length:
- Select the Textfield from the Tree Area.
- Move to the Property Editor and under the Textfield Properties section, scroll down to find the Max Length property.
- Enter the value in the Max Length property.
TIPS
Use the textfield and set the max lines and min lines to create a larger text field for e.g. a description.
Use the Obscure Text option to make your users enter their password.
Use the textfield together with the Teta CMS to create a search bar for your products.
Last modified 2mo ago