Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Forms capture information through different input options. Some options inputs are free-form (users type), others are controlled (users select or scan). Choosing the right input option reduces effort and prevents errors.

[Image placeholder: Form section showing a mix of text entry, selection, date/time, and file upload.]

Forms capture information through different input options. Some options are free-form (users type), others are controlled (users select), and some are assisted (users pick from a calendar, upload files, or scan codes). Choosing the right input option reduces effort and prevents errors.

For short text values, use a single-line input. When users need to enter longer text (for example notes or descriptions), use a multi-line textarea so the layout supports reading and editing. If your product supports internationalized text entry, use translation inputs for localized values.

For choices, use selection controls when you can restrict entry to known options. Use radio buttons when one option must be chosen and keeping options visible helps decision-making. Use single select or multi select controls when options are better placed in a dropdown. If the list is large or dynamic, prefer controls that support search or table views (for example combobox, lookup input, or table selection).

, where users type a value, and others are controlled, where users select, pick, upload, or scan. In general, use free-form inputs when the value cannot be predefined, and use controlled inputs when you want to restrict entry to valid values or make entry faster and more consistent.

For a detailed breakdown of specific input components and when to use them, see Selecting the right input.For numeric, date, and time information, prefer dedicated inputs (number input, date picker, date range picker) instead of free typing. For attachments, use file upload patterns or a files table when users manage multiple files. Where scanning is the primary and fastest method, use scanners (RFID or visual codes).

Help

Help provides in-context guidance like tooltips, placeholder text, or helper text, to assist the user in providing the right information. Help should reduce uncertainty and prevent avoidable errors.

...

Use a Tabs Form when the form becomes complex and dividing it into clearly separated sections improves the user experience. Tabs Form uses a vertical tab-based layout where each tab contains its own form or content. This approach helps users focus on one topic at a time, prevents long scrolling, and makes large forms easier to understand. Tabs Form should be used when the content naturally breaks into logical groups that users can navigate between, while still keeping validation and saving consistent across the whole experience.

Selecting the right

...

input

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.

...