Textarea

import Textarea from 'frui/fields/Textarea';

Copy

Props

Textarea accepts all props of a standard HTML Textarea element. See Moz for standard textarea 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 textarea
rows	number	No	Number of visible rows
style	CSS Object	No	Standard CSS object
value	string	No	Default value (Controlled)

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

<Textarea name="name" placeholder="Enter name..">Hello World</Textarea>

Copy

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

<Textarea onUpdate={value => alert(value)}>Hello World</Textarea>

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 textarea field red.

<Textarea error onUpdate={value => alert(value)}>Not a hotdog.</Textarea>

Copy