Input

Description

The input component is an umbrella component for all inputs which share the same style as the classic text input field.

NB: Is InputMasked what you are looking for?

Consider using input field with a mask
Consider using input field with a mask

Demos

Placeholder text

Search text placeholder

Medium and stretched search input

Input with icon

With left / right aligned text

Disabled input

Show failure status

With FormStatus

You have to fill in this field

Input with suffix (additional description)

Stretched Input in horizontal wrapping FormRow and a long label

Long label labwl Adipiscing mauris dis proin nec:

Numbers are using DNB Mono (monospace)

Also, this example manipulates the value during typing.

Numbers are using DNB Mono (monospace)

Submit Form with Input

Pressing the enter key will trigger a submit.

Input with clear button

Pushing the clear button or pressing the esc key will clear the input.

Input password type

The password component have to ensure that there is still room for password managers to inject the input with their UX functionality.

In order to get the show/hide button, you may have to import the component like so:

import InputPassword from '@dnb/eufemia/components/input/InputPassword'