Input

Documentation Index

Fetch the complete documentation index at: https://docs.cognite.com/llms.txt

Use this file to discover all available pages before exploring further.

​

Input

​

When to use

• Use Input fields when you need users to provide specific text-based information, such as assets, name, or other detailed data, which will be processed or stored.
• Use Input fields in forms or for entering credentials like usernames, passwords, or email addresses.

​

When to use something else

• If users need to choose from a predefined set of options, consider Select, Combobox, Checkbox, or Radio.
• If the user can add options or benefits from suggestions while typing, consider Combobox.
• For date and time input, use Date and time picker primitives.
• For long text such as descriptions, use Textarea.

​

Dos and don’ts

• Don’t use long placeholder descriptions that repeat the label name.
• Don’t repeat the label in placeholder copy.
• Don’t use placeholder text that could be misunderstood as pre-filled text.
• Don’t wrap text. Truncate or use a Textarea instead.
• Don’t use any default filled text as users may overlook it.

​

Anatomy

• Leading content: Optional content that appears to the left of the input field. It is not recommended to use multiple leading content items unless it is absolutely necessary.
  • Icon: An optional icon that appears to the left of the input field to help the user understand the context of the input.
  • Prefix: An optional, fixed formatted text that appears to the left of the input field, e.g., a currency symbol.
• Trailing content: Optional content that appears to the right of the input field. It is not recommended to use multiple trailing content items unless it is absolutely necessary.
  • Button: Helpful for quick actions related to the input, e.g., ‘Copy’ or ‘Search’. A tooltip may be helpful to explain the action.
  • Suffix: An optional, fixed formatted text that appears to the right of the input field, e.g., a unit of measurement.
  • Stepper: Allows the user to increment or decrement a value by a fixed amount.
  • Shortcut: Helpful shortcut key related to the input, e.g., ‘Ctrl + C’ for ‘Copy’. A Tooltip may help explain the shortcut.

​

Behavior

• Value updates as the user types unless using a masked or controlled pattern; validation messages should associate with the field for assistive tech.
• Single-line only: use Textarea when line breaks are expected.

​

Often used with

• Label, Helper text; input-group layout (leading icon, prefix, suffix, trailing Button) per Anatomy; Tooltip on trailing icon Buttons.