Norsk Tipping Design System

PhoneNumberInput

A text input field for norwegian 8-digits phone number inputs.

STATUS: This component is in preview.
  • The prop-interface has pretty much stabilized
  • The component has typically been tested out in the field
  • Consult the design team for usage
  • As always: Your feedback is welcomed!

The PhoneNumberInput field is used to type in users phone numbers. The input formats norwegian phone numbers in groups of two. If landcodes other than norwegian is provided, the input will not be formatted.

Below is the simplest example: the input with its label.

Basic usage

label renders a visible label that names the input. Without it, no label renders, and the input must be named another way, such as with aria-label or a <label> of your own. Also you might wish to decorate the input with a placholder or a descriptive phone icon on the left.

Label, placeholder and icon usage

The phone number input also provides error handling.

Error usage

On this page