NordSecurity.Design

Input

Overview

The Input is an interactive field that allows users to enter text and data.

When you’re using the Input component, make sure it’s labeled clearly to show users what kind of information they should enter. This helps users understand why they’re entering the information and makes the whole experience better.

When to use

Use the Input component to collect user data, such as strings, numbers applicable in various contexts, and other values like emails and passwords.

When not to use

It is not recommended to use the Input component for selecting from a specific set of options. Instead, opt for the Select component..

Anatomy

  1. Input
  2. Placeholder / Value

Variants & States

State

The Input states are named after their css pseudo-class.

The Input component goes through various states as the user interacts with it. These states include:

  • default: Placeholder displayed instead of content
  • hover: Active state when the user hovers over the input
  • filled: Displayed after the user enters content and moves on
  • typing: Indicates when the user is actively typing
  • hasError: Highlights input content as invalid based on validation rules
  • disabled: Prevents user interaction

Icon

The Input can has two optional icon positions in the component

  • iconStart: An icon placed at the start of the input field, such as a search icon for example
  • iconEnd: An icon placed at the end (right) of the input field, such as a password visibility toggle icon

Text Area

If the text exceeds a single line, use the isTextArea variant to enable multiple lines of text within a fixed-height text input.

Internationalization

For RTL (right-to-left) languages, there are no custom adjustments made.

Properties

Name Type Values Description
type text
password
email
number		 Controls the type of information being inserted
disabled Boolean true
false		 Sets the field as to appear disabled, users will not be able to interact with the text field
isTextArea Boolean true
false		 Determines if the input is a textArea
required Boolean true
false		 Indicates whether the input is required
placeholder String Text displayed in the text box before a user enters a value
iconStart icon Block Icon displayed at the start of the input
iconEnd icon Block Icon displayed at the end of the input

Usage Guidelines

DoUse when entering data with a wide variety of responses.
DoUse clear and consistent labels that describe the meaning of the input field.
DoProvide a placeholder text that guides the user on what type of entry or formatting the field requires.
DoThe input component's width should correspond to the length of information users are expected to input into the field.
Don’tDon't overuse placeholder text. While placeholder text can be helpful, don't use it as a replacement for proper labels. Placeholder text vanishes as soon as users start typing, potentially leaving them uncertain about the expected input.
Don’tDon't use it when the user needs to select from a specific set of options. Instead, use Select.
Don’tdefault: Placeholder displayed instead of content
Don’thover: Active state when the user hovers over the input
Don’tfilled: Displayed after the user enters content and moves on
Don’ttyping: Indicates when the user is actively typing
Don’thasError: Highlights input content as invalid based on validation rules
Don’tdisabled: Prevents user interaction
Don’ticonStart: An icon placed at the start of the input field, such as a search icon for example
Don’ticonEnd: An icon placed at the end (right) of the input field, such as a password visibility toggle icon

Content Guidelines

We use input to help the user correctly identify the type of the field. Errors may appear when failing to comply with the format.

Keep in mind that hints written into placeholders will disappear as the user types their answer, so more complex instructions work better with hints written on top of the field.

Voice and tone

  • We aim to be as neutral as possible.
  • Value errors should still feel polite, not demanding.

Copy

Hint

We write hints either in the form of a suggestion or an example.

DoType a website
Dowebsite.com

Error

We clearly communicate the issue and suggest how to fix it.

DoIncorrect format. Use jpg and png files only

We make errors dynamic if possible.

DoCharacter limit exceeded: -43, -42…

Accessibility

  • If there’s a possibility of errors, make sure that they are read automatically and as soon as they appear on the screen.
  • Make sure that visual directions translate to the audio dimension equally. If not, add alt texts to clarify.
Do[Hint] website.com or 000.000.0.0 [Narrator] Available formats: example.com or IP address in numerical value.
Don’t[Hint] website.com or 000.000.0.0 [Narrator] website.com or zero zero zero. zero zero zero. zero. zero