Active theme set to Nord LightNord Dark and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.

Input Ready

Inputs are used to allow users to provide text input when the expected input is short. As well as plain text, Input supports various types of text, including passwords and numbers.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-input label="Label" value="Value"></nord-input>

Properties

PropertyAttributeDescriptionTypeDefault
typetype

The type of the input.

"text" | "email" | "password" | "tel" | "url" | "search" | "number""text"
labellabel

Label for the input.

string""
hinthint

Optional hint text to be displayed with the input. Alternatively use the hint slot.

string | undefinedundefined
hideLabelhide-label

Visually hide the label, but still show it to assistive technologies like screen readers.

booleanfalse
placeholderplaceholder

Placeholder text to display within the input.

string | undefinedundefined
errorerror

Optional error to be shown with the input. Alternatively use the error slot.

string | undefinedundefined
requiredrequired

Determines whether the input is required or not. An input marked as required will be announced as such to users of assistive technology. When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.

booleanfalse
expandexpand

Controls whether the input expands to fill the width of its container.

booleanfalse
disableddisabled

Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.

booleanfalse
namename

The name of the form component.

string | undefinedundefined
valuevalue

The value of the form component.

string""

Events

EventDescriptionType
inputFired as the user types into the input.NordEvent
changeFired whenever the input's value is changed via user interaction.NordEvent

Slots

Slot nameDescription
labelUse when a label requires more than plain text.
hintOptional slot that holds hint text for the input.
errorOptional slot that holds error text for the input.
startOptional slot used to place an icon at the start of the input.

Methods

Method nameParametersDescription
focus(options?: FocusOptions) => voidoptions: An object which controls aspects of the focusing process.
Programmatically move focus to the component.
blur() => voidN/AProgrammatically remove focus from the component.
click() => voidN/AProgrammatically simulates a click on the component.

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

  • Use to provide a text input where the expected input is short.
  • Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.
  • Use help text and placeholder to provide additional, non-critical instructions.
  • Validate input as soon as users have finished interacting with them (but not before).
  • Where necessary, label the input as “Optional” when you need to request input that’s not required.

Don’t #

  • Don’t use when the expected text input is long. Use textarea component instead.
  • Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.

Content guidelines #

Input labels act as a title for the text field. Labels should typically be short and in noun form:

Company name
What is your company name?

When writing input labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

Company name
Company Name

When an input isn’t part of a form and is placed individually on a page, you could provide the input label as a call to action:

Leave a comment
Comment

Do not use colons in input label:

First name
First name:

Types #

This section describes the different input types, their purpose, and when to use each type.

NamePurpose
textThe default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.
emailA field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards.
passwordA single-line text field where the value is obscured. This type will alert user if a site is not secure.
telA field for entering a telephone number. Displays a number keypad on mobile devices.
urlA field variant that is used to let the user enter and edit an URL.
searchA single-line text field for entering search strings.
numberUsed to let the user enter a number.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Localization

Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.

Localization Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.