Skip to content
Home

Input

Info
Demos
Properties
Events

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

Code Editor
<Input label="Label:" placeholder="Placeholder text" />

Search text placeholder

Code Editor
<Input

  label="Search:"

  type="search"

  placeholder="Search text placeholder"

  on_change={({ value }) => {

    console.log('on_change', value)

  }}

  on_submit={({ value }) => {

    console.log('Submit:', value)

  }}

/>

Medium and stretched search input

Code Editor
<Input

  size="medium"

  type="search"

  stretch={true}

  value="Medium search value"

  on_change={({ value }) => {

    console.log('on_change', value)

  }}

/>

Input with icon

With left / right aligned text

Code Editor
<Input

  label="Input with icon:"

  placeholder="Input"

  label_direction="vertical"

  icon="check"

  bottom

/>

<Input

  label="Input with icon:"

  label_sr_only

  placeholder="Input with a placeholder"

  icon_position="right"

  icon="check"

  align="right"

/>

Disabled input

Code Editor
<Input

  disabled

  label="Disabled input:"

  placeholder="Disabled Input with a placeholder"

/>

With FormStatus

You have to fill in this field
You have to fill in this field
Code Editor
<FormRow bottom>

  <Input

    label="With FormStatus:"

    status="You have to fill in this field"

    value="Input value with error"

  />

</FormRow>

<FormRow>

  <Input

    label="With button:"

    status="You have to fill in this field"

    value="Input value with error"

    type="search"

  />

</FormRow>

Input with suffix (additional description)

Code Editor
<Input

  label={

    <Space element="span" className="dnb-h--large">

      Fødselsnummer

    </Space>

  }

  label_direction="vertical"

  autocomplete="on"

  placeholder="Placeholder text"

  suffix={

    <HelpButton title="Info" size="large">

      Some content

    </HelpButton>

  }

  on_change={({ value }) => {

    console.log('on_change', value)

  }}

/>

Stretched Input in horizontal wrapping FormRow and a long label

Long label labwl Adipiscing mauris dis proin nec:
Status message
Code Editor
<FormRow

  label="Long label labwl Adipiscing mauris dis proin nec:"

  vertical

>

  <Input

    value="I stretch ..."

    stretch

    status="Status message"

    status_state="warn"

  />

</FormRow>

Numbers are using DNB Mono (monospace)

Also, this example manipulates the value during typing.

Numbers are using DNB Mono (monospace)
Code Editor
<Input

  label="Label:"

  autocomplete="on"

  placeholder="Placeholder text"

  status="Numbers are using DNB Mono (monospace)"

  status_state="info"

  value="1234567890"

  on_change={({ value }) => {

    console.log('on_change', value)

    return String(value).toUpperCase()

  }}

/>

Submit Form with Input

Pressing the enter key will trigger a submit.

Code Editor
<FormSet

  prevent_submit={true}

  on_submit={(event) => {

    console.log('FormRow.on_submit', event)

  }}

>

  <FormRow>

    <Input

      type="search"

      label="Label:"

      value="Input ..."

      selectall={true}

      on_submit={(event) => {

        console.log('Input.on_submit', event)

      }}

      on_change={({ value }) => {

        console.log('on_change:', value)

      }}

      right="small"

      bottom="x-small"

    />

    <Button text="Submit" type="submit" />

  </FormRow>

</FormSet>

Input with clear button

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

Code Editor
<FormRow direction="vertical">

  <Input clear={true} value="Value ..." size="medium" />

  <Input clear={true} value="Value ..." type="search" top />

  <Input clear={true} value="Value ..." icon="loupe" type="search" top />

</FormRow>

Input password type

The password component has 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'
Code Editor
<InputPassword

  label="Label:"

  placeholder="A placeholder text"

  on_change={({ value }) => {

    console.log('on_change:', value)

  }}

  on_show_password={() => {

    console.log('on_show_password')

  }}

  on_hide_password={() => {

    console.log('on_hide_password')

  }}

/>