Inputbox component
The Input Box component enables users to provide textual or numeric input within a dashboard. It supports multiple input types such as text, number, email, and password, making it versatile for scenarios ranging from search queries to secure data entry.
Input Boxes can be configured with default text, editable content, and validations depending on the type selected.
Best Situations to Use
Use the Input Box component when you want to:
Capture user input (e.g., search terms, form entries, email addresses).
Allow numeric input for filters, thresholds, or parameters.
Enable secure password entry within authentication workflows.
Create form-like interactions in dashboards.
Not Recommended for:
Displaying static text (use Label or Text Box instead).
Collecting large text blocks or paragraphs (use dedicated form inputs).
Properties
General
Component Name: Assign a unique identifier.
Left / Top: Define placement on the dashboard canvas.
Height / Width: Set component size.
Initial Visibility: Toggle whether the Input Box is visible on the first preview.
Editable: Allow users to type or restrict input editing.
Default Text: Pre-fill with a message or placeholder.
Input Type: Choose supported types:
Text: Alphanumeric entry.
Password: Secure entry with masked characters.
Number: Restrict input to numeric values.
Email: Validate entry in an email format.
Background
Shadow: Enable or disable shadow effect.
Shadow Color: Define shadow hue.
Shadow Transparency: Adjust shadow opacity.
Style
Background Color: Set field background color.
Background Opacity: Adjust opacity for transparency effects.
Border: Enable/disable a border.
Border Radius: Round the corners of the Input Box.
Border Thickness: Define the border’s thickness.
Border Color: Customize border color.
Font Style: Choose normal or italic.
Font Weight: Set text thickness (e.g., normal, bold, 300/600/900).
Font Family: Select a typeface consistent with dashboard branding.
Font Color: Define the color of entered text.
Output
Captures the entered value for use in filters, conditions, or actions within the dashboard.
Example Configurations
Text Input Box
Default Text: “Search Products”
Input Type: Text
Password Entry Box
Input Type: Password
Border Radius: 5px for a modern look
Numeric Filter Box
Input Type: Number
Used for setting KPI thresholds dynamically
Email Capture Box
Input Type: Email
Validates user entry for proper email format
Notes
Use default text for guidance (e.g., “Enter year”).
Always choose the correct input type to ensure validation and accuracy.
Pair Input Boxes with buttons or triggers for effective interactivity.