Input

import Input from 'frui/fields/Input';

Copy

Props

Input accepts all props of a standard HTML Input element. See Moz for standard input attributes.

Name	Type	Required	Notes
className	string	No	Standard HTML class names
defaultValue	string	No	Default value (Uncontrolled)
error	string\|boolean	No	Any error message
name	string	No	Used for react server components.
onChange	Function	No	Event handler when value has changed
onUpdate	Function	No	Update event handler
passRef	LegacyRef	No	Passes ref to html input
style	CSS Object	No	Standard CSS object
value	string	No	Default value (Controlled)

Input wraps the HTML standard `<input />` element. Therefore, you can use any input attributes as props.

<Input name="name" placeholder="Enter name.." value="John Doe" />

Copy

onUpdate is like onChange except the value is passed instead of the change event.

<Input onUpdate={value => alert(value)} />

Copy

The onChange event is triggered when the value has changed. The following arguments are passed to the event handler:

Name	Type	Sample
event	Event Object	see: Change Event

The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:

Name	Type	Sample
value	string	`foobar`

You can pass the error prop to highlight the input field red.

<Input error={string|true} value="Not a hotdog." />

Copy