Data entry is a critical interaction pattern in the Alius platform. Users configure robots, set parameters, edit configuration files, and input technical data. The data entry system must minimize errors, provide clear guidance, and respect the technical nature of the content.

Form Controls

Input (Text Field)

  • Single-line text input for short values (names, identifiers, URLs, numbers)
  • Include clear labels positioned above or to the left of the input
  • Show placeholder text with an example value when the field is empty
  • Provide inline validation with specific error messages
  • Support optional helper text below the input for additional context
  • Single-selection dropdown for choosing from a predefined list
  • Show the currently selected value in the closed state
  • Support search/filter within the dropdown for long lists
  • Group options by category when the list is extensive

Multi-Select

  • Allow selection of multiple items from a list
  • Show selected items as tags or chips within the input
  • Provide a clear-all option
  • Support search/filter for finding items in large lists

Radio

  • Single selection from a small set of mutually exclusive options (2-5)
  • All options should be visible simultaneously
  • Use for choices where the user needs to compare options before selecting
  • Include a clear label for each option

Switch (Toggle)

  • Binary on/off control for settings and preferences
  • Clearly indicate the current state (on vs. off)
  • Use for settings where the options are simply enable/disable
  • Pair with a descriptive label

Slider

  • Continuous value selection within a defined range
  • Show the current value numerically alongside the slider
  • Define min, max, and step values clearly
  • Use for parameters where approximate values are acceptable (e.g., brightness, speed)

File Upload

  • Support drag-and-drop and click-to-browse
  • Show file name, size, and type after selection
  • Validate file type and size before uploading
  • Show upload progress for large files
  • Support multiple file upload when applicable

Configuration Editing

Config Form

  • Structured form for editing configuration parameters
  • Group related settings into sections with clear section headers
  • Show the current value, default value, and valid range for each parameter
  • Provide a “Reset to defaults” option

YAML / JSON Editor

  • Code-style editor for advanced configuration editing
  • Syntax highlighting for the target format
  • Real-time validation with error indicators on the offending line
  • Auto-completion for known keys and values
  • Show a diff view when comparing current configuration to defaults or previous versions

Data Entry Principles

  • Technical configs need defaults — never present an empty form for configuration; pre-fill with sensible defaults
  • Risky configs need explanation — parameters that affect safety, performance, or hardware behavior must include a warning and a description of the consequences
  • Error positions must be clear — when validation fails, the user must know exactly which field has the error and why
  • Example inputs should be complete — placeholders and helper text should show realistic, complete examples, not “Enter text here”
  • Batch editing — where possible, support editing multiple related values together rather than one at a time
  • Unsaved changes warning — alert the user before they navigate away from a form with unsaved changes