Skip to content

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:

GroupDescription
GeneralModify the chart’s general appearance, including the background color, borders, shadows, and drill-out choices.
TitleEnable and customize chart title text, alignment, font, and color.
BasicDefines label, description, disabled state, and sizing.
VariableBinds 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 or date[] 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, 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.