#Input

#Import

import { Input } from '@dnb/eufemia'

#Description

The input component is an umbrella component for all inputs which 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 to use 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 which overrides Eufemia's styling.

Different browsers use different color schemes. How ever, Eufemia does not overwrite the :autofill background color as of now. We only make sure the border (outline) is styled correctly in all the different states.

#Accessibility

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

But you may also consider to use a multiline input with a characterCounter:

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