Skip to content
Home

Input

Info
Demos
Properties
Events

Import

import { Input } from '@dnb/eufemia'

Description

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

Relevant links

Formatted input fields (masked values)

You may consider using InputMasked for formatted strings and Eufemia Forms fields like Field.Number and Field.Currency for formatted numbers:

Browser autofill styling

When users insert values using autofill in their browser, the browser applies its own background and text colors that override Eufemia's styling.

Different browsers use different color schemes. However, Eufemia does not currently overwrite the :autofill background color. We only ensure the border (outline) is styled correctly in all states.

Accessibility

Please avoid using the maxlength attribute when possible, as it may reduce accessibility. You can instead use the TextCounter component.

You may also consider using a multiline input with a characterCounter:

40 av 40 tegn gjenstår.

<Field.String
  label="Label text"
  placeholder="Enter your text"
  multiline
  rows={1}
  characterCounter={40}
/>

Demos

Placeholder text

<Input label="Label" placeholder="Placeholder text" />

Search text placeholder

<Input
  label="Search"
  type="search"
  placeholder="Search text placeholder"
  onChange={({ value }) => {
    console.log('onChange', value)
  }}
  onSubmit={({ value }) => {
    console.log('Submit:', value)
  }}
/>

Medium and stretched search input

<Input
  size="medium"
  type="search"
  stretch={true}
  value="Medium search value"
  onChange={({ value }) => {
    console.log('onChange', value)
  }}
/>

Input with icon

With left / right aligned text

<Input label="Input with icon" placeholder="Input" icon="check" bottom />
<Input
  label="Input with icon"
  labelSrOnly
  placeholder="Input with a placeholder"
  iconPosition="right"
  icon="check"
  align="right"
/>

Disabled input

<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
<Flex.Vertical>
  <section>
    <Input
      label="With FormStatus"
      status="You have to fill in this field"
      value="Input value with error"
    />
  </section>
  <section>
    <Input
      label="With button"
      status="You have to fill in this field"
      value="Input value with error"
      type="search"
    />
  </section>
</Flex.Vertical>

Input with suffix and custom label component

<Input
  label={<Lead>Fødselsnummer</Lead>}
  autocomplete="on"
  placeholder="Placeholder text"
  suffix={
    <HelpButton title="Info" size="large">
      Some content
    </HelpButton>
  }
  onChange={({ value }) => {
    console.log('onChange', value)
  }}
/>

Stretched Input in horizontal flex and a long label

Status message
<FieldBlock
  label="Long label labwl Adipiscing mauris dis proin nec"
  forId="input-id"
>
  <Input
    id="input-id"
    value="I stretch ..."
    stretch
    status="Status message"
    statusState="warning"
  />
</FieldBlock>

Numbers are using DNB Mono (monospace)

Also, this example manipulates the value during typing.

Numbers are using DNB Mono (monospace)
<Input
  label="Label"
  autocomplete="on"
  placeholder="Placeholder text"
  status="Numbers are using DNB Mono (monospace)"
  statusState="information"
  value="1234567890"
  onChange={({ value }) => {
    console.log('onChange', value)
    return String(value).toUpperCase()
  }}
/>

Submit Form with Input

Pressing the enter key will trigger a submit.

<Form.Handler
  onSubmit={(event) => {
    console.log(event)
  }}
>
  <FormLabel forId="search">Label</FormLabel>
  <Flex.Horizontal align="baseline">
    <Input
      id="search"
      type="search"
      value="Input ..."
      selectAll={true}
      onSubmit={(event) => {
        console.log('Input.onSubmit', event)
      }}
      onChange={({ value }) => {
        console.log('onChange:', value)
      }}
    />
    <Form.SubmitButton />
  </Flex.Horizontal>
</Form.Handler>

Input with clear button

Pushing the clear button will clear the input.

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

Prevent typing of invalid characters

You can check out the Field.String example for more information using onInput event handler property.

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.

Read more about it in Field.Password.