NordSecurity.Design

Select

Overview

Select should be used when users need to select a single option from a list of predefined choices. It is ideal for scenarios where the number of options is limited and easily scannable.

When using the Select input component, ensure that the available options are clear and relevant to the user’s context. Provide concise and meaningful labels for each option to improve usability.

When to use

  • To let the user choose one option from a limited amount of options.

When not to use

  • It is not recommended to use a Select when you have less than 4 options to choose from. Consider using radio inputs instead.

Anatomy

  1. Select
  2. Placeholder / Selected option
  3. Chevron
  4. Select Dropdown
  5. Option

Variants & States

State

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

Hover is activated when the user interacts with an element with a pointing device, but does not necessarily activate it.

Selecting flow

Visualized here is the flow the user goes through when selecting an option from a Select.

Select dropdown

For the Select dropdown, we are making use of the native dropdown that is provided by the operating system and browser of the user. This helps the user by presenting him with a familiar interface to choose an option.

Internationalization

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

Properties

Name Type Values Description
disabled Boolean true
false		 Controls whether the Select is displayed disabled
Option.title String The title of an option
Option.value Union number
string		 The value type of an option
selectedOptionIndex Number Controls which option is selected by default

Usage Guidelines

DoUse Select when users need to choose a single option from a list of choices.
DoProvide a clear and descriptive placeholder that identifies the purpose of the Select input.
DoOrder the options inside the dropdown alphabetically or by recommended usage.
Don’tDon't use the Select for cases where the number of options is too large, as it may become unwieldy and challenging for users to navigate.
Don’tDon't overload the Select input with excessive or irrelevant options that may confuse users.
Don’tDon't use inconsistent styling or behavior for the dropdown, as it may lead to a confusing user experience.
Don’tTo let the user choose one option from a limited amount of options.
Don’tIt is not recommended to use a Select when you have less than 4 options to choose from. Consider using radio inputs instead.

Content Guidelines

We use selects for choosing one option from a list that is too long for radio buttons.

Voice and tone

  • We keep the tone clear and functional.
  • We use plain language that users recognize.

Options

  • We keep options short and scannable.
  • We are consistent in style and structure.
  • We use sentence case.
  • We do not use end punctuation.
DoAnti-malware: Pause for 5 mins / Pause for 30 mins / Pause for 2 hours / Turn off
Don’tVPN Protocol: Use Automatic (Recommended) / The NordLynx protocol / NordWhisper

Placeholder

  • We add a placeholder when no option is preselected.
  • A placeholder explains the type of choice the user needs to make.
  • We don’t repeat the field label. We turn it into a clear instruction.
  • We use direct phrasing without unnecessary words, like “please.”
  • We do not use end punctuation.
DoReport a website issue: Select an issue
Don’tPlease select a problem you enco…

Accessibility

When a user focuses a select, screen readers should announce its label, the currently selected option, the role (for example, combo box), and the state (for example, collapsed).

DoMode. Light. Combo box. Collapsed. > Light. 1 of 3. Selected.
Don’tLight. Select dropdown.