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

#When to use Input vs Eufemia Forms

Classic form components like this one are presentational controls. They handle the styling, sizing, icons, and basic events, while you manage their value, validation, and error handling yourself.

For most data input and forms situations, use Eufemia Forms fields instead. They build on these same components, but add data handling, validation, and error messages through the surrounding Form.Handler. Browse the field components to find the one that matches your data.

Reach for a classic component when you need it standalone outside of a form context, or when you handle the value and validation yourself.

The Eufemia Forms equivalent of Input is Field.String for text values, while Field.Number and Field.Currency handle numbers and amounts.

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

#Step controls (increment and decrement)

For a number input with stepper buttons to increment and decrement the value (plus/minus, number spinner), use Field.Number (or Field.Currency) with the showStepControls property.

#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}
/>

#Related components

Input is part of the Input category. Other components for similar needs:

• Autocomplete — to help people find and choose from matching suggestions as they type.
• Checkbox — when people can turn one or more options on or off.
• DatePicker — when people need to choose one date or a date range.
• Dropdown — when people need to choose one option from a list.
• Filter — to help people narrow down a list or data set.
• FormLabel — to name an input, control, or form-related field.

See all in Input →

#Demos

#Placeholder text

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

#Search text placeholder

Search inputs show a loupe icon by default. Add showSubmitButton only when an integrated submit button is needed. If you previously relied on type="search" to render a submit button, add showSubmitButton.

<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

This example uses showSubmitButton to show the integrated submit button.

<Input
  size="medium"
  type="search"
  stretch={true}
  showSubmitButton={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

<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"
      showSubmitButton
    />
  </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

<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.

<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. The last example combines the clear button with an explicit search submit button.

<Flex.Vertical>
  <Input showClearButton={true} value="Value ..." size="medium" />
  <Input showClearButton={true} value="Value ..." type="search" />
  <Input
    showClearButton={true}
    value="Value ..."
    type="search"
    showSubmitButton
  />
</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.