Web controls are the basic building blocks used within web pages as UI components. There are many different types of web controls; however, they all have some common attributes:
- Effect the current page UI or functionality (most are visual but some act as containers or add invisible functionality to the web application)
- Use properties to control their style and behavior
- Are constructed in a "tree" structure that allows controls to contain children controls but always roll up to the page at the top level
Categories of Web Controls
Content & Interactive
Use cases here are straight forward - display information. These controls can be simple labels or hyperlinks but can also be based on dynamic content to create personalized pages or list specific items from a customer or records from a database. Here are some controls in this category:
Label - The most basic control to display text
Hyperlink - Display clickable text to open a new page outside of Airkit or download a file
Image - Display an image from your Media Library, content uploaded by a user or an external file
Map - Display a map of a single location, multiple locations or the user's current location (learn more)
Button - A button or link that navigates or performs and actions within Airkit's web flows
Progress Bar - Displays multi-step progress with dynamic updates, labels and step navigation
Form Fields and Input Capture
Use cases here are to capture information from a user and range from a standard form with text inputs and drop downs to more complex examples including credit card captures, scheduling, photo uploads from a mobile device and more. Here are some controls in this category:
Simple Fields
Text Input - Simple text input to capture small amounts of text like first/last name or order identifiers
Text Area Input - A larger input area for larger amounts of text like comments or descriptions
Number Input - Capture numeric values from a user such as quantity, age or rating
Currency Input - Capture monetary values input by a user that are culture specific with proper formatting and precision
Phone Number Input - Capture phone numbers of a user with proper formatting, masking and auto-fill suggestion
Email Input - Capture an email address from a user with proper formatting, validation and auto-fill suggestion
Date Picker - An input that allows a user to enter in a date and use a calendar view to choose it
Secure Text Input - A special text input that bypasses client side state of the values stored and encrypts values for use cases with sensitive information such as credit card numbers, SSN and passwords
Option Based Fields
Drop Down List - Used to provide preset options (fixed or dynamic) to a user and allows selecting a single value
Radio Button List - Used to provide a list of options to a user that allow the user to select one option at a time (mutually exclusive options)
Check Box List - Used to provide a list of options to a user that allow the user to select multiple options by checking multiple boxes
Checkbox & Radio Button - Used a single checkable (checkbox) or clickable (radio button) elements to add into your form as needed. Example include opt-in/acknowledgement stand alone check boxes.
Combined and Pre-Built Controls
Scheduler - Allow a user to pick a specific date and time that is available from a dynamically based availability model
Credit Card - Capture payment information from credit cards securely with standard fields
Plaid Integration - Capture bank account information with verification through Plaid
Payment Request Button - Request payment with ApplePay, Google Pay with a button
Place Search Input - Type ahead location input using Google's place APIs
Media Capture - Allow uploading photos and files from a users device
Signature Pad - Capture a users signature with their finger on mobile devices or typing for agreements
Containers & Layout
These controls are used as fundamental page building tools both to create alignment/position of all the other controls but also for templates used to display a list of records dynamically and can be nested within themselves as much as needed. Learn more about how to use these controls for layout and dynamic templating with data.
Container - The building block that allow for controlling position & alignment of it's children controls
List - Use a template layout of children controls to display a dynamic list of items such as products, orders or input options with customized layout
File Upload Web Control - Prompts users to select file(s) to upload. This Web Control doesn't have a default appearance: the styling is entirely customizable, with other Web Controls used as component parts. It also doesn't come with automatic input binding: rather than maintaining a variable that contains uploaded an Asset, it triggers Events with associated values related to the file's upload progress.