InputReady

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.

Open in new window

View RTL

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

<provet-input label="Email" type="email" name="email" autocomplete="email"></provet-input>

<provet-stack>
  <provet-input label="Password" value="Secret password 123" type="password">
    <provet-button slot="end" aria-describedby="password-tooltip" square>
      <provet-icon name="interface-edit-on"></provet-icon>
      <provet-icon name="interface-edit-off"></provet-icon>
    </provet-button>
  </provet-input>
  <provet-tooltip id="password-tooltip">Show / hide password</provet-tooltip>

  <provet-input label="API key" value="SUPERSECRETCODE" type="password">
    <provet-button slot="start" aria-describedby="api-tooltip" square>
      <provet-icon name="interface-edit-on"></provet-icon>
      <provet-icon name="interface-edit-off"></provet-icon>
    </provet-button>
  </provet-input>
  <provet-tooltip id="api-tooltip">Show / hide API key</provet-tooltip>

  <provet-input label="Pet name" value="Norfryd" type="text">
    <provet-dropdown slot="start" size="s">
      <provet-button slot="toggle" aria-describedby="pet-tooltip" square>
        <provet-icon name="generic-feline"></provet-icon>
      </provet-button>
      <provet-dropdown-item>
        <provet-icon slot="start" name="generic-feline"></provet-icon>
        Feline
      </provet-dropdown-item>
      <provet-dropdown-item>
        <provet-icon slot="start" name="generic-birds"></provet-icon>
        Bird
      </provet-dropdown-item>
      <provet-dropdown-item>
        <provet-icon slot="start" name="generic-fish"></provet-icon>
        Fish
      </provet-dropdown-item>
      <provet-dropdown-item>
        <provet-icon slot="start" name="generic-canine"></provet-icon>
        Canine
      </provet-dropdown-item>
      <provet-dropdown-item>
        <provet-icon slot="start" name="generic-amphibia"></provet-icon>
        Amphibia
      </provet-dropdown-item>
    </provet-dropdown>
  </provet-input>
  <provet-tooltip id="pet-tooltip">Select an icon for your pet</provet-tooltip>

  <provet-input label="Livestock" value="Q4 2022" type="text">
    <provet-dropdown slot="end" align="end" size="s">
      <provet-button slot="toggle" aria-describedby="livestock-tooltip" square>
        <provet-icon name="generic-cattle"></provet-icon>
      </provet-button>
      <provet-dropdown-item>
        <provet-icon slot="start" name="generic-cattle"></provet-icon>
        Cattle
      </provet-dropdown-item>
      <provet-dropdown-item>
        <provet-icon slot="start" name="generic-suidae"></provet-icon>
        Suidae
      </provet-dropdown-item>
      <provet-dropdown-item>
        <provet-icon slot="start" name="generic-sheep"></provet-icon>
        Sheep
      </provet-dropdown-item>
    </provet-dropdown>
  </provet-input>
  <provet-tooltip id="livestock-tooltip">Select an icon for your livestock</provet-tooltip>
</provet-stack>

<script>
  const hiddenInputs = document.querySelectorAll("provet-input[type='password']")
  hiddenInputs.forEach(input => {
    input.addEventListener("click", () => {
      if (event.target.localName !== "provet-button") return
      input.type = input.type == "password" ? "text" : "password"
    })
  })

  const dropdowns = document.querySelectorAll("provet-dropdown")
  dropdowns.forEach(dropdown => {
    dropdown.addEventListener("click", event => {
      if (event.target.localName === "provet-button") return
      const icon = event.target.querySelector("provet-icon").getAttribute("name")
      dropdown.querySelector("[slot='toggle'] provet-icon").setAttribute("name", icon)
      dropdown.hide()
    })
  })
</script>

<style>
  [type="password"] provet-icon[name="interface-edit-off"],
  [type="text"] provet-icon[name="interface-edit-on"] {
    display: none;
  }
</style>

<provet-input label="Custom icon">
  <provet-icon slot="start" name="generic-telephone"></provet-icon>
</provet-input>

<provet-stack>
  <provet-input style="--n-input-inline-size: 65px" label="Size" value="65px"></provet-input>
  <provet-input style="--n-input-inline-size: 150px" label="Size" value="150px"></provet-input>
  <provet-input label="Size" value="Default"></provet-input>
  <provet-input label="Size" value="Expand to fill the available width" expand></provet-input>
</provet-stack>

<provet-stack>
  <provet-input label="Label" value="Some value" disabled></provet-input>
  <provet-input label="Amount" value="20.00" disabled>
    <div slot="start">£</div>
  </provet-input>
</provet-stack>

<provet-input label="Numbers only" disallow-pattern="[^0-9]"></provet-input>

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

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

<provet-input label="Time" hint="Time must be in 2-digit hours and 2-digit minutes." placeholder="HH:MM" type="number">
  <provet-icon slot="end" name="interface-time"></provet-icon>
</provet-input>

<script type="module">
  import { Maskito } from "https://cdn.jsdelivr.net/npm/@maskito/core@2.4.0/+esm"
  import { maskitoTimeOptionsGenerator } from "https://cdn.jsdelivr.net/npm/@maskito/kit@2.4.0/+esm"

  async function applyInputMask() {
    const input = document.querySelector("provet-input")

    await customElements.whenDefined("provet-input")
    const nativeInputElement = await input.getNativeElement()

    const maskOptions = maskitoTimeOptionsGenerator({
      mode: "HH:MM",
    })
    const maskedInput = new Maskito(nativeInputElement, maskOptions)
  }

  applyInputMask()
</script>

<provet-input label="Readonly" value="Value" readonly></provet-input>

<provet-input label="Required" required value="Value"></provet-input>

<provet-input type="search" placeholder="Search and filter" label="Search" hide-label></provet-input>

<provet-stack>
  <provet-input size="s" label="Email" type="email" placeholder="user@example.com"></provet-input>
  <provet-input size="m" label="Email" type="email" placeholder="user@example.com"></provet-input>
  <provet-input size="l" label="Email" type="email" placeholder="user@example.com"></provet-input>
</provet-stack>

<provet-input
  style="--n-label-color: var(--n-color-text-weaker)"
  size="s"
  label="Email"
  type="email"
  placeholder="you@example.com"
></provet-input>

<provet-stack>
  <provet-input label="Text selection" value="Norfryd"></provet-input>
  <provet-stack direction="horizontal" gap="s">
    <provet-button-group>
      <provet-button id="select-all-button" size="s">Select all</provet-button>
      <provet-button id="select-range-button" size="s">Select range</provet-button>
    </provet-button-group>
    <provet-button-group>
      <provet-button id="replace-selection-button" size="s">Replace selection</provet-button>
      <provet-button id="remove-selection-button" size="s">Remove selection</provet-button>
    </provet-button-group>
  </provet-stack>
</provet-stack>

<script>
  const input = document.querySelector("provet-input")
  const selectAllButton = document.querySelector("#select-all-button")
  const selectRangeButton = document.querySelector("#select-range-button")
  const replaceSelectionButton = document.querySelector("#replace-selection-button")
  const removeSelectionButton = document.querySelector("#remove-selection-button")

  selectAllButton.addEventListener("click", () => {
    input.select()
    input.focus()
  })

  selectRangeButton.addEventListener("click", () => {
    input.setSelectionRange(3, 6)
    input.focus()
  })

  replaceSelectionButton.addEventListener("click", () => {
    input.setRangeText("foo")
    input.focus()
  })

  removeSelectionButton.addEventListener("click", () => {
    input.setRangeText("")
    input.focus()
  })

  input.addEventListener("blur", () => {
    console.log("selectionStart", input.selectionStart)
    console.log("selectionEnd", input.selectionEnd)
  })
</script>

<provet-stack>
  <provet-input type="unit" placeholder="1234" label="Size">
    <div slot="end">cm</div>
  </provet-input>
  <provet-input type="unit" placeholder="1234" label="Distance">
    <div slot="end">km</div>
  </provet-input>
  <provet-input type="unit" placeholder="12.00" label="USD" style="--n-input-text-align: start">
    <div slot="start">$</div>
  </provet-input>
</provet-stack>

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

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

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

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

<provet-stack>
  <provet-input label="With prefix">
    <div slot="start">$</div>
  </provet-input>
  <provet-input label="With suffix">
    <div slot="end">cm</div>
  </provet-input>
  <provet-input label="Dosage">
    <div slot="end">mL per hour</div>
  </provet-input>
</provet-stack>

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

Properties

Property	Attribute	Description	Type	Default
`type`	`type`	The type of the input.	`\| "text" \| "email" \| "password" \| "tel" \| "url" \| "search" \| "number" \| "unit" \| "button"`	`"text"`
`expand`	`expand`	Controls whether the input expands to fill the width of its container.	`boolean`	`false`
`disallowPattern`	`disallow-pattern`	Optionally disallow certain characters from being used inside the input, using a regex pattern.	`string \| undefined`	`undefined`
`size`	`size`	The size of the component.	`"s" \| "m" \| "l"`	`"m"`
`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`
`hideRequired`	`hide-required`	Visually hide the required indicator, but still show required attribute to assistive technologies like screen readers.	`boolean`	`false`
`autocomplete`	`autocomplete`	Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.	`AutocompleteAttribute`	`"off"`
`readonly`	`readonly`	Makes the component readonly, so that it is not editable. Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.	`boolean`	`false`
`selectionStart`	–	Gets or sets the starting position or offset of a text selection. MDN Reference		`undefined`
`selectionEnd`	–	Gets or sets the end position or offset of a text selection. MDN Reference		`undefined`
`selectionDirection`	–	Gets or sets the direction in which selection occurred. MDN Reference		`undefined`
`disabled`	`disabled`	Makes the 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 form component.	`string \| undefined`	`undefined`
`value`	`value`	The value of the form component.	`string`	`""`
`form`	`form`	Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form.	`HTMLFormElement \| null`	`undefined`

Events

Event	Description	Type
`select`	Fired when some text has been selected.	`NordEvent`
`input`	Fired as the user types into the input.	`NordEvent`
`change`	Fired whenever the input's value is changed via user interaction.	`NordEvent`

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.
`start`	Optional slot used to place an icon or prefix at the start of the input.
`end`	Optional slot used to place an icon or suffix at the end of the input.

Methods

Method name	Parameters	Description
`select() => void`	N/A	Selects all the text in the text field. MDN Reference
`setSelectionRange(start: number \| null, end: number \| null, direction?: "forward" \| "backward" \| "none") => void`	`start`: The offset into the text field for the start of the selection. `end`: The offset into the text field for the end of the selection. `direction`: The direction in which the selection is performed.	Sets the start and end positions of a selection in the text field. MDN Reference
`setRangeText(replacement: string, start?: number, end?: number, selectMode: "select" \| "start" \| "end" \| "preserve") => void`	`replacement`: The string to insert. `start`: The 0-based index of the first character to replace. Defaults to the current `selectionStart` value (the start of the user's current selection). `end`: The 0-based index of the character after the last character to replace. Defaults to the current `selectionEnd` value (the end of the user's current selection). `selectMode`: A string defining how the selection should be set after the text has been replaced.	Replaces a range of text with a new string. MDN Reference
`getNativeElement() => void`	N/A	Returns the native `<input>` or `<textarea>` element used under the hood.
`focus(options?: FocusOptions) => void`	`options`: An object which controls aspects of the focusing process.	Programmatically move focus to the component.
`blur() => void`	N/A	Programmatically remove focus from the component.
`click() => void`	N/A	Programmatically simulates a click on the component.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

Property	Description	Default
`--n-input-inline-size`	Controls the inline size, or width, of the input.	`240px`
`--n-input-background`	Controls the background of the input, using our color tokens.	`var(--n-color-active)`
`--n-input-color`	Controls the text color of the input, using our color tokens.	`var(--n-color-text)`
`--n-input-border-color`	Controls the border color of the input, using our color tokens.	`var(--n-color-border-strong)`
`--n-input-border-radius`	Controls how rounded the corners are, using border radius tokens.	`var(--n-border-radius-s)`
`--n-input-text-align`	Controls the alignment of text within the input itself.	`start`
`--n-label-color`	Controls the text color of the label, using our color tokens.	`var(--n-color-text)`

Dependencies

This component is internally dependent on the following components:

Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.

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:

Types

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

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

Icon usage in input

Each input size has a recommended icon size. The medium input uses the s icon size, the small input uses the xs icon size, and the large input uses the m icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.

Input masking

We recommend using Maskito for creating an input mask which ensures that users type values according to a predefined format.

Integration

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

Integration Guidelines

Troubleshooting

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

Edit page

InputReady

Properties

Events

Slots

Methods

CSS Properties

Dependencies

Icon

Usage #

Do #

Don’t #

Content guidelines #

Types #

Icon usage in input #

Input masking #