> For the complete documentation index, see [llms.txt](https://docs.ownchat.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ownchat.app/whatsapp-channel/flow-builder/input-components.md).

# Input Components

{% embed url="<https://app.supademo.com/demo/cmlkvm7vp14uh5yi37ow3riee?utm_source=link>" %}

**Text Input** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9ow6y6000ay00jbm2r8j2a?utm_source=link>" %}

Single-line field for short text entries.\
Used for names, titles, or simple responses.

**Number Input** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9p4af101d1v50jauewbmkb?utm_source=link>" %}

Accepts numeric values only.\
Used for age, quantity, pricing, or count-based inputs.

**Email Input** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9pdnus000svz0jol9poabw?utm_source=link>" %}

Collects email addresses with format validation.\
Ensures accurate email data collection.

**Password Input** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9pjqgb01eev50j631o4bp5?utm_source=link>" %}

Secure input field with masked characters.\
Used for confidential or protected entries.

**Passcode Input** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9prxjl01c7xv0jdtc72s2y?utm_source=link>" %}

Numeric-only field for OTP or verification codes.\
Used for authentication and validation processes.

**Phone Input** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9pwr8n00z6z40jv30qimzg?utm_source=link>" %}

Collects mobile numbers with country code support.\
Ensures standardised phone number formatting.

**Text Area** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9q5ki701dxxv0jl7i1g6cw?utm_source=link>" %}

Multi-line input field for longer responses.\
Used for feedback, descriptions, or detailed messages.

**Tag Input** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9qdia100zqz40jeyxt71ah?utm_source=link>" %}

Allows multiple keyword-style entries in a single field.\
Used for categories, skills, or grouped inputs.

**Date Picker** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9r1qxx01nav50jma1j8zzg?utm_source=link>" %}

Allows selection of a specific date.\
Prevents manual date entry errors.

**Calendar Picker (Single)** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9r8jq7013oz40j0wmqa8ln?utm_source=link>" %}

Displays calendar view to select one date.\
Used for booking or appointment selection.

**Calendar Picker (Range)** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9rkxmd014jz40je4b9mb1l?utm_source=link>" %}

Allows selection of start and end dates.\
Used for travel, leave, or duration-based selections.

**Document Picker**&#x20;

{% embed url="<https://app.supademo.com/demo/cmo9tolpt003vx70jytf9wu0l?utm_source=link>" %}

Allows users to upload document files.\
Used for verification or document submission.

**Photo Picker** &#x20;

{% embed url="<https://app.supademo.com/demo/cmo9twnfa00nrvz0jiv9x7ba0?utm_source=link>" %}

Allows users to upload image files.\
Used for profile images or product uploads.