Textarea

A multiline text input field.

labelText

Notes

Notes

helpText

placeholder

errorMessage

required

requirementText

disabled

onChange

(e) => console.log('onChange', e)

(e) => console.log('onChange', e)

onBlur

(e) => console.log('onBlur', e)

(e) => console.log('onBlur', e)

rows

value

defaultValue

className

name

import * as React from "react";
import { Textarea } from "@nulogy/components";

export default () => {
  return (
    <Textarea
      labelText="Notes"
      helpText="Please add any additional notes here."
      placeholder="Some placeholder text..."
      requirementText="(Optional)"
      disabled={false}
      onChange={e => console.log("onChange", e)}
      onBlur={e => console.log("onBlur", e)}
    />
  );
}

import * as React from "react";
import { Textarea } from "@nulogy/components";

export default () => {
  return (
    <Textarea
      labelText="Notes"
      helpText="Please add any additional notes here."
      placeholder="Some placeholder text..."
      requirementText="(Optional)"
      disabled={false}
      onChange={e => console.log("onChange", e)}
      onBlur={e => console.log("onBlur", e)}
    />
  );
}

Props

Name	Type	Default	Description
labelText	react node		Informs users what the corresponding input field is for.
helpText	string		Placed below the label to provide assistance on how to fill out a field or the expected format. It can also provide an explanation of why the information is needed and how it will be used.
placeholder	string	null	A hint to the expected format for the field. Not a replacement for a label.
errorMessage	string		Displays an error message and applies red style
required	boolean		Makes the field require selection before the form will submit.
requirementText	string		(Optional) or (Required).
disabled	boolean	false	Marks the field as disabled and disallows user input
onChange	function		Change event handler that will be run whenever the value of the input is updated.
onBlur	function		Change event handler that will be run whenever the input loses focus.
rows	number	3	A custom number of rows to show by default.
value	string		Value of input, used when controlling the component
defaultValue	string		Default value of input
id	string		A unique ID for this input
className	string		className passed to the wrapper element.
name	string		A unique name for this input

Textarea

Props

Related Components