# Web Controls Overview

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

&#x20;

## 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](label-web-control) - The most basic control to display text

[Hyperlink](hyperlink-web-control) - Display clickable text to open a new page outside of Airkit or download a file

[Image](image-web-control) - Display an image from your [Media Library](../studio/builder-bar/media-library), content [uploaded by a user](../building-apps/assets/working-with-files-and-media) or an external file

[Map](map-web-control) - Display a map of a single location, multiple locations or the user's current location ([learn more](map-web-control))

[Button](button-web-control) - A button or link that navigates or performs and actions within Airkit's web flows

[Progress Bar](progress-bar-web-control) - Displays multi-step progress with dynamic updates, labels and step navigation

&#x20;

### 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](payment-request-button-web-control), [scheduling](../building-apps/calendars/rescheduling-deflected-calls), [photo uploads](../building-apps/assets/working-with-files-and-media) from a mobile device and more.  Here are some controls in this category:

### Simple Fields

[Text Input](text-input-web-control) - Simple text input to capture small amounts of text like first/last name or order identifiers

[Text Area Input](text-area-web-control) - A larger input area for larger amounts of text like comments or descriptions

[Number Input](number-input-web-control) - Capture numeric values from a user such as quantity, age or rating

[Currency Input](currency-input-web-control) - Capture monetary values input by a user that are culture specific with proper formatting and precision

[Phone Number Input](phone-input-web-control) - Capture phone numbers of a user with proper formatting, masking and auto-fill suggestion

[Email Input](email-input-web-control) - Capture an email address from a user with proper formatting, validation and auto-fill suggestion

[Date Picker](date-picker-web-control) - An input that allows a user to enter in a date and use a calendar view to choose it

[Secure Text Input](secure-text-input-web-control) - 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

&#x20;

### Option Based Fields

[Drop Down List](secure-text-input-web-control) - Used to provide preset options (fixed or dynamic) to a user and allows selecting a single value

[Radio Button List](radio-button-list-web-control) - 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](checkbox-list-web-control) - Used to provide a list of options to a user that allow the user to **select multiple options** by checking multiple boxes

[Checkbox](checkbox-web-control) & [Radio Button](radio-button-web-control) - 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.

&#x20;

### Combined and Pre-Built Controls

[Scheduler](scheduler-web-control) - Allow a user to pick a specific date and time that is available from a dynamically based availability model

[Credit Card](credit-card-web-control) - Capture payment information from credit cards securely with standard fields

[Plaid Integration](credit-card-web-control) - Capture bank account information with verification through Plaid

[Payment Request Button](payment-request-button-web-control) - Request payment with ApplePay, Google Pay with a button

[Place Search Input](place-search-input-web-control) - Type ahead location input using Google's place APIs

[Media Capture](media-upload-web-control) - Allow uploading photos and files from a users device

[Signature Pad](signature-control) - Capture a users signature with their finger on mobile devices or typing for agreements

&#x20;

### 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](container-web-control) - The building block that allow for controlling position & alignment of it's children controls

[List](list-web-control) - 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](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](../variable-data-types/the-asset-data-type), it triggers [Events](../studio/events) with associated values related to the file's upload progress.
