Skip to content
Home

Input

Info
Demos
Properties
Events

Events

EventsDescription
on_change(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 }.
on_focus(optional) will be called on focus set by the user. Returns { value, event }.
on_key_down(optional) will be called on key down by the user. Returns { value, event }.
on_blur(optional) will be called on blur set by the user. Returns { value, event }.
on_submit(optional) will be called on submit button click. Returns { value, event }.
on_clear(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 on_change event listener:

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


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


  return <Input on_change={onChangeHandler} />
}

Prevent setting a new value

You can use e.g. event.preventDefault() during on_key_down, or return false during on_change. 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 on_key_down={onKeyDownHandler} on_change={onChangeHandler} />
  )
}