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 | Modify the chartβs general appearance, including the background color, borders, shadows, and drill-out choices. |
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.
π’ 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.
ποΈ 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.
π 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.
π 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
ordate[]
type. - Customizable dropdown positions, asterisk indicators, and disabling.
π Select Input
A dropdown selection input for choosing one value from a predefined set.
Key Features:
- Binds to a
string
,number
, orboolean
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.