Components

Text Area(React)

Multiline inputs for text.

Version:14.18.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { TextArea } from '@thumbtack/thumbprint-react';

Basic Text Area

TextArea is a controlled component. This means that the visible text will always match the contents of the value prop.

In this example, notice how value is stored within this.state. The onChange function will set the new value when the user enters or removes a character in the textarea.

Disabled Text Area

The isDisabled prop disables the TextArea visually and functionally.

Text Area with an error

The hasError prop only changes the Text Area’s color. It should be used alongside an error message that helps users advance through the form.

Props

TextArea

  • value
    required

    The current value of the textarea.

    Type
    string
  • onChange
    required

    The function that is called when the textarea value changes.

    It receives two arguments: onChange(newValue, event).

    The consumer of this component should use that data to update the value prop passed in to this component.

    Type
    (newValue: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void
  • id

    Adds a HTML id attribute to the textarea. This is used for linking the HTML with a Label.

    Type
    string
  • isDisabled

    Visually and functionally disable the textarea.

    Type
    boolean
    Default
    false
  • isReadOnly

    Adds readonly HTML attribute, allowing users to select (but not modify) the input.

    Type
    boolean
    Default
    false
  • isRequired

    Adds the required HTML attribute to the textarea.

    Type
    boolean
    Default
    false
  • hasError

    Makes the textarea border and text color red.

    Type
    boolean
    Default
    false
  • placeholder

    Text that appears within the textarea when there is no value.

    Type
    string
  • name

    Adds name HTML attribute to element, indicating the property name associated with the selected value.

    Type
    string
  • maxLength

    The maximum number of characters that a user can enter. onChange will not fire if a user enters a character that exceeds maxLength.

    Type
    number
  • onFocus

    Fires when the textarea receives focus.

    Type
    (event: React.FocusEvent<HTMLTextAreaElement>) => void
  • onBlur

    Fires when the textarea loses focus.

    Type
    (event: React.FocusEvent<HTMLTextAreaElement>) => void
  • dataTest

    A selector hook into the React component for use in automated testing environments. It is applied internally to the <textarea /> element.

    Type
    string