Input Box

The Input Box (Textbox) component allows users to enter and display text within a dashboard. It supports multiple input types such as text, numbers, emails, and passwords, making it a flexible tool for user input, filtering, or form-based interactions.

Formatting and styling options allow customization of the input field’s appearance to align with the overall dashboard design.

Best Situations to Use

Use the Input Box when you want to:

• Capture user input such as search terms, numeric values, or identifiers.

• Provide form-based data entry (e.g., email, password, custom parameters).

• Allow users to filter or query dashboards dynamically.

• Enable parameter passing to backend systems or associated components.

Not Recommended for:

• Displaying static or descriptive text (use a Label or Text component instead).

• Complex multi-field forms requiring advanced validation.

Properties

General

• Component Name: Assign a unique identifier.

• Left / Top: Define position of the Input Box on the dashboard canvas.

• Height / Width: Set dimensions of the component.

• Initial Visibility: Toggle whether the Input Box appears on the first preview.

• Input Type: Choose from supported types:

  • Text: Standard alphanumeric input.

  • Number: Numeric values only.

  • Email: Email address input (validation applied).

  • Password: Masked input for secure entry.

Background

• Shadow: Enable or disable shadow effect.

• Shadow Color: Select shadow color.

• Shadow Transparency: Adjust shadow opacity for depth and emphasis.

Style

• Background Color: Customize the field’s background.

• Font Color: Define text color for entered values.

• Font Size: Adjust input text size.

• Font Style: Apply styles such as italic or normal.

• Font Weight: Set text thickness (e.g., normal, bold, 300/600/900).

• Font Family: Choose a typeface consistent with dashboard branding.

Example Configurations

1. Text Input Box

   • Input Type = Text

   • Used for free-text search queries.

2. Number Input Box

   • Input Type = Number

   • Used for entering thresholds or ranges.

3. Email Input Box

   • Input Type = Email

   • Used for capturing email addresses in a form.

4. Password Input Box

   • Input Type = Password

   • Used for masked secure entry.

Notes

• Always choose the appropriate input type to ensure validation (e.g., Email for email addresses).

• Pair Input Boxes with actions or filters to make dashboards interactive.

• Use consistent styling across dashboards for a professional user experience.