Container
Text
Image
Icon
Button
Local State
Text Input
Date Picker
Conditional Logic
Conditional Switch Logic
Sheet
Tabbed Pager
Data Loader
Repeating Item
Countdown Timer
Data Transformer
Date Elements
Paging Data Loader
Rich Text
The Text Input Componentenables users to enter text or data within your app. It is essential for forms, search bars and other interactive elements, allowing for user engagement and data collection. The component is highly customisable to fit the specific needs of your application.
Multiple Input Types
Placeholder Text
1. Label
Enter text to describe the input field. It helps users understand what information they need to enter, improving usability and accessibility.
2. Placeholder
Add placeholder text to provide hints to users on what information they may enter into the input.
3. Data Value
This is where you set an initial value for the input field. It can be used to pre-fill information, making it easier for users to understand what to enter or to provide default data. Click the Data Value field and select from the relevant option that would have been set in the Key of the Local State component.
4. Content Type
Choose the type of input. Options include:
Text
Username
Password
NewPassword
Number
Phone
5. Width
This allows you to set the horizontal size of your input field. Click the % symbol to switch between percentage-based sizing and exact pixel measurements. When using the percentage option, the % value you set for your input is relative to the size of its container.
6. Layout Type
Click the field to choose between the Bordered and Basic options. A bordered layout type will have a 1px line surrounding your input field, whereas the basic layout type will not.
7. Border Color
Click the field to select from the available color options for your border. These are pre-set in Colorsand can be edited in this section to match your app's theme.
Keep It Simple: Avoid cluttering the input field with too many options or settings to enhance usability.
Responsive Design: Ensure input fields are appropriately sized for various devices.
Test for Accessibility: Use appropriate labels and attributes to ensure accessibility for all users, including those using screen readers.