---
title: "Form Components"
description: "A collection of input components for capturing and displaying interactive data entry within dashboards."
group: Components
tags: [Form, Input, Dashboard, Data Entry, Interactive, Variable]
---

import { Aside } from '@astrojs/starlight/components';

# Form Components

Form components allow dashboards to capture interactive input from users — binding those inputs to variables which can be used throughout the dashboard for dynamic visualizations, filters, or calculations.

---

## 🎨 Widget Customizations

All form components share these customization sections:

| Group       | Description |
|:------------|:-------------------------------------------------------------|
| **[General](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#general)** | Modify the chart’s general appearance, including the background color, borders, shadows, and drill-out choices.
| **[Title](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#title)** | Enable and customize chart title text, alignment, font, and color. |
| **Basic**   | Defines label, description, disabled state, and sizing. |
| **Variable**| Binds the form control to a named dashboard variable for storing input. |

---

## ✏️ Text Input

A simple, single-line text input field that binds its value to a dashboard variable.

**Key Features:**
- Supports custom placeholder text.
- Configurable border radius, variant, and optional icons.
- Can display a description and required asterisk.
- Binds to a `string` variable type.

<Aside>
 Text inputs are ideal for capturing short free-text values such as names, titles, or search queries.
</Aside>

---

## 🔢 Number Input

A numeric input field for capturing numbers only, bound to a numeric dashboard variable.

**Key Features:**
- Optional stepper controls for incrementing/decrementing values.
- Customizable step size, min and max limits.
- Can display a description and required asterisk.
- Binds to a `number` variable type.

<Aside>
 Number inputs are great for scores, thresholds, percentages, or any numeric configuration.
</Aside>

---

## 🎚️ Slider

An interactive slider input to select a number within a range.

**Key Features:**
- Define min, max, step, and marks for discrete points.
- Can display value labels inline or on hover.
- Configurable size, variant, and track color.
- Binds to a `number` variable type.

<Aside>
 Use sliders for setting scores, thresholds, ranges, or weights quickly and visually.
</Aside>

---

## 📝 Text Area

A multi-line text input field for capturing longer free-form text.

**Key Features:**
- Supports variable number of rows, autosizing, and max/min height limits.
- Optional icons, border radius, and variants.
- Displays a description and asterisk if required.
- Binds to a `string` variable type.

<Aside>
 Text areas work well for comments, notes, and multi-line form entries.
</Aside>

---

## 📅 Date Input

A calendar date picker component, supporting both single and multiple date selection.

**Key Features:**
- Single or multiple date pick modes.
- Configurable placeholder, variant, and icons.
- Full variable binding to a `date` or `date[]` type.
- Customizable dropdown positions, asterisk indicators, and disabling.

<Aside>
 Perfect for selecting reporting periods, deadlines, or event dates.
</Aside>

---

## 📑 Select Input

A dropdown selection input for choosing one value from a predefined set.

**Key Features:**
- Binds to a `string`, `number`, or `boolean` type variable.
- Supports search, clearing, and custom option creation.
- Customizable dropdown height, placeholder, and position.
- Optional required validation and asterisk.
- Full control over colors, hover states, and border radius.

<Aside>
 Ideal for selecting categories, statuses, or labels. Allows dynamic creation of new options when enabled.
</Aside>