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
<Provider
  formElement={{
    label_direction: 'vertical',
  }}
>
  <Flex.Vertical>
    <div>
      <Input
        label="With FormStatus:"
        status="You have to fill in this field"
        value="Input value with error"
      />
    </div>
    <div>
      <Input
        label="With button:"
        status="You have to fill in this field"
        value="Input value with error"
        type="search"
      />
    </div>
  </Flex.Vertical>
</Provider>

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 flex and a long label

Status message
Code Editor
<Provider
  formElement={{
    label_direction: 'vertical',
  }}
>
  <FieldBlock
    label="Long label labwl Adipiscing mauris dis proin nec:"
    forId="input-id"
  >
    <Input
      id="input-id"
      value="I stretch ..."
      stretch
      status="Status message"
      status_state="warn"
    />
  </FieldBlock>
</Provider>

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
<Form.Handler
  onSubmit={(event) => {
    console.log(event)
  }}
>
  <FormLabel for_id="search">Label:</FormLabel>
  <Flex.Horizontal align="baseline">
    <Input
      id="search"
      type="search"
      value="Input ..."
      selectall={true}
      on_submit={(event) => {
        console.log('Input.on_submit', event)
      }}
      on_change={({ value }) => {
        console.log('on_change:', value)
      }}
    />
    <Form.SubmitButton />
  </Flex.Horizontal>
</Form.Handler>

Input with clear button

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

Code Editor
<Flex.Vertical>
  <Input clear={true} value="Value ..." size="medium" />
  <Input clear={true} value="Value ..." type="search" />
  <Input clear={true} value="Value ..." icon="loupe" type="search" />
</Flex.Vertical>

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