Input draft

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.

<nord-input label="Label" value="Value"></nord-input>

<nord-input label="Custom icon">
  <nord-icon slot="before" size="s" name="generic-telephone"></nord-icon>
</nord-input>

<nord-input label="Label" value="Some value" disabled></nord-input>

<nord-input label="First name" expand></nord-input>

<nord-input label="Search" type="search" placeholder="Filter icons by name and tags" expand hide-label></nord-input>

<nord-input label="Label" expand>
  <div slot="hint">
    Hint is an accessible way to provide <strong>additional information</strong> that might help the user
  </div>
</nord-input>

<nord-input>
  <div slot="label">Label <span style="color: var(--n-color-status-success)">with color</span></div>
</nord-input>

<nord-input
  label="Label"
  hint="Hint is an accessible way to provide additional information that might help the user"
  expand
></nord-input>

<nord-input label="First name" placeholder="e.g. John"></nord-input>

<nord-input label="Label" error="This field is required"></nord-input>

Properties

Property	Attribute	Description	Type	Default
`type`	`type`	The type of the input.	`"text" \| "email" \| "password" \| "tel" \| "url" \| "search" \| "number"`	`"text"`
`label`	`label`	Label for the input.	`string`	`""`
`hint`	`hint`	Optional hint text to be displayed with the input. Alternatively use the hint slot.	`string \| undefined`	`undefined`
`hideLabel`	`hide-label`	Visually hide the label, but still show it to assistive technologies like screen readers.	`boolean`	`false`
`placeholder`	`placeholder`	Placeholder text to display within the input.	`string \| undefined`	`undefined`
`error`	`error`	Optional error to be shown with the input. Alternatively use the error slot.	`string \| undefined`	`undefined`
`required`	`required`	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.	`boolean`	`false`
`expand`	`expand`	Controls whether the input expands to fill the width of its container.	`boolean`	`false`
`disabled`	`disabled`	Makes the input component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.	`boolean`	`false`
`name`	`name`	The name of the input component.	`string \| undefined`	`undefined`
`value`	`value`	The value of the input component.	`string`	`""`

Events

Event	Description	Type
`input`	Fired as the user types into the input.	`NordEvent`
`change`	Fired whenever the input's value is changed via user interaction.	`NordEvent`

Methods

`focus(options?: FocusOptions) => void`

Programmatically move focus to the component

options: An object which controls aspects of the focusing process.

`blur() => void`

Programmatically remove focus from the component.

`click() => void`

Programmatically simulates a click on the component.

Slots

Slot name	Description
`label`	Use when a label requires more than plain text.
`hint`	Optional slot that holds hint text for the input.
`error`	Optional slot that holds error text for the input.
`before`	Optional slot that holds an icon for the input.

Usage

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

Integration

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

Integration 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.