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')
  }}
/>