Skip to content
Home

Input

Info
Demos
Properties
Events

Events

PropertyTypeDescription
onChangefunction(optional) will be called on value changes made by the user. Returns an object with the value as a string and the native event: { value, event }.
onFocusfunction(optional) will be called on focus set by the user. Returns { value, event }.
onKeyDownfunction(optional) will be called on key down by the user. Returns { value, event }.
onBlurfunction(optional) will be called on blur set by the user. Returns { value, event }.
onSubmitfunction(optional) will be called on enter key press or submit button click. Returns { value, event }.
onSubmitFocusfunction(optional) will be called on submit button focus. Only relevant when type="search". Returns { value, event }.
onSubmitBlurfunction(optional) will be called on submit button blur. Only relevant when type="search". Returns { value, event }.
onClearfunction(optional) will be called on a clear button click. Returns { value, previousValue, event }.

Manipulate the input value during typing

You have two possibilities to manipulate the value while a user is typing. Either you handle the value with your own state, or you return a modified value in the onChange event listener:

import { format } from '@dnb/eufemia/components/number-format/NumberUtils'


function Component() {
  const onChangeHandler = ({ value }) => {
    return format(value)
  }


  return <Input onChange={onChangeHandler} />
}

Prevent setting a new value

You can use e.g. event.preventDefault() during onKeyDown, or return false during onChange. They are not 100% the same user experience, but can both be useful in different use cases.

function Component() {
  const onKeyDownHandler = ({ event }) => {
    event.preventDefault()
  }
  const onChangeHandler = ({ value }) => {
    return false
  }


  return <Input onKeyDown={onKeyDownHandler} onChange={onChangeHandler} />
}