#Input

#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

• Figma
• Source code
• Docs code

#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:

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