Skip to content

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

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