Textarea

A multiline text input field.

import { Textarea } from "@nulogy/components";

<Textarea labelText="Label" id="textarea" />

Use when

  • Users need to enter multiple lines of text.

Variations

Custom size

<Textarea id="custom-size" labelText="Label" rows={2} />

Disabled

<Textarea id="disabled" labelText="Label" disabled />

Error

Please fill this out

<Textarea id="error" labelText="Label" errorMessage="Please fill this out" />

With all labels

<Textarea
  id="all-labels"
  labelText="Label"
  helpText="Additional help text"
  requirementText="(Optional)"
  placeholder="Placeholder"
/>

Props

NameTypeDefaultDescription

rows

Number

3

A custom number of rows to show by default.

value

String

undefined

Value of input, used when controlling the component

defaultValue

String

Default value of input

id

String

null

A unique ID for this input

name

String

undefined

A unique name for this input

disabled

Boolean

false

Marks the field as disabled and disallows user input

helpText

Node

null

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.

labelText

String

null

Informs users what the corresponding input field is for.

placeholder

String

null

A hint to the expected format for the field. Not a replacement for a label.

required

Boolean

false

Makes the field require selection before the form will submit.

requirementText

String

null

(Optional) or (Required).

className

String

undefined

className passed to the wrapper element.

onChange

Function

undefined

Change event handler that will be run whenever the value of the input is updated.

onBlur

Function

undefined

Change event handler that will be run whenever the input loses focus.

errorMessage

String

null

Displays list of error messages and applies red style

errorList

Array of Strings

null

Displays list of error messages and applies red style

Related components