Page History
...
Selecting the right imput
Choosing the right input type reduces effort, prevents errors, and keeps the form easy to scan. Use the sections below to match what the user needs to enter with the input option that supports it best.
Free-form input
Use free-form inputs when users need to type information that cannot be reliably selected from a predefined list. Pick the option that matches how much text is needed, whether it must be localized, and whether the value should be restricted to numeric entry.
| Component | Requirement | Why this is the better fit | Typical examples |
|---|---|---|---|
| Input | Short, single-line text | Keeps the layout compact and scannable for quick entries. | Name, email address, reference ID |
| Textarea | Longer text with line breaks | Gives users space to write and edit comfortably without feeling constrained. | Comment, description, feedback |
| Translation Input | Short text in multiple languages | Adds language selection so the same value can be maintained per locale. | UI label, short user-facing string, error message title |
| Translation Textarea | Longer text in multiple languages | Supports multi-line localized content with language selection for each locale. | Instructions, long descriptions, terms text |
| Number Input | Numeric values (with constraints/formatting) | Prevents invalid characters and supports numeric formatting/validation. | Price, quantity, measurement |
Selection
Use selection controls when users should choose from predefined options instead of typing. The right control depends on whether the choice is binary, single, or multiple, and on how large or complex the option set is.
| Component | Requirement | Why this is the better fit | Typical examples |
|---|---|---|---|
| Checkbox | A single binary choice (yes/no) where a checkbox fits the context | Clear for confirmations and acknowledgements; supports default, read-only, and disabled states. | “I agree”, “I have read…”, “Include archived items” |
| Toggle Switch | A simple on/off setting | Strong visual feedback for enabled/disabled states; feels like a setting control. | Enable notifications, Activate feature, Turn on auto-sync |
| Radio Group | Exactly one choice from a small set where options should stay visible | Makes mutually exclusive choices easy to compare without opening a menu. | Shipping method, Payment type, Priority level |
| Single Select | Exactly one choice from a list (options can be hidden in a dropdown) | Saves space while still allowing a clear single selection; can be static or API-backed. | Category, Status, Role |
| Multi Select | Multiple choices from a list | Supports selecting several values in one field; can be static or API-backed. | Tags, Categories, Related items |
| Combobox | Exactly one choice from a large or dynamic list where search helps | Adds search and pagination so users can find options quickly in long lists. | Assign user from directory, Select asset from inventory, Pick customer |
| Lookup Input | Selecting from a very large dataset where a dropdown is impractical | Opens a searchable dialog with a data grid, making big datasets manageable. | Select equipment, Choose part number, Pick location from thousands |
| Table Selection | Selecting from large/complex records where a table view is clearer | Combines a field with a data grid; better when users need to compare columns before selecting. | Choose an order, Select an incident record, Pick a person with metadata |
Date and Time
Use date and time inputs whenever users enter time-based values, because pickers prevent formatting errors and reduce cognitive load. Choose between a single point in time and a full period depending on whether one date or a start–end range is required.
| Component | Requirement | Why this is the better fit | Typical examples |
|---|---|---|---|
| Date Picker | One date (optionally with a time) | Keeps the interaction simple and fast for single-point-in-time values. | Due date, Appointment date/time, Start date |
| Date Range Picker | A start and end date (optionally with time) | Captures a complete period in one control and prevents inconsistent ranges. | Reporting period, Booking range, Filter “from–to” timeframe |
Files
Use file inputs when attachments are part of the submission. Choose a simple uploader for small numbers of files, and a table-based approach when users need an overview, actions, or management of multiple attachments.
| Component | Requirement | Why this is the better fit | Typical examples |
|---|---|---|---|
| File Upload | Uploading one or a few files as part of a form | Simple upload flow with configurable restrictions and behavior. | Attach document, Upload image, Add single attachment |
| Files Table | Managing multiple files with overview and actions | Table view improves scanning and control; supports upload, deletion, custom actions, and pagination. | Evidence set, Multiple attachments, Document bundle management |
Scanning
Use scanning inputs when data is best captured through RFID or visual codes rather than manual entry. Scanning is ideal for workflows where speed and accuracy matter and a scan-first experience reduces mistakes.
| Component | Requirement | Why this is the better fit | Typical examples |
|---|---|---|---|
| RFID Scanner | Capturing RFID tag values (scan-first, with manual fallback) | Fast and reliable for RFID workflows; supports validation, events, defaults, and manual entry. | Asset tagging, Equipment identification, Warehouse tracking |
| Visual Codes Scanner | Capturing QR codes, barcodes, or other visual codes (scan-first, with manual fallback) | Uses the device camera for quick capture; ideal for common barcode/QR scenarios. | Inventory scanning, Event check-in, Product verification |
