Components

Text Area(React)

Multiline inputs for text.

Version:	`14.18.2` •View source•Changelog•Report 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.

function TextAreaExample() {
    const [value, setValue] = React.useState('');
    return (
        <div>
            <Label text="Business description">
                <TextArea
                    value={value}
                    placeholder="Tell us about your business"
                    onChange={v => setValue(v)}
                />
            </Label>
        </div>
    );
}

function TextAreaExample() {
    const [value, setValue] = React.useState('');
    return (
        <div>
            <Label text="Business description">
                <TextArea
                    value={value}
                    placeholder="Tell us about your business"
                    onChange={v => setValue(v)}
                />
            </Label>
        </div>
    );
}

Disabled Text Area

The isDisabled prop disables the TextArea visually and functionally.

function TextAreaExample() {
    const [value, setValue] = React.useState('');
    return (
        <TextArea
            isDisabled
            placeholder="Tell us about your business"
            onChange={v => setValue(v)}
            value={value}
        />
    );
}

function TextAreaExample() {
    const [value, setValue] = React.useState('');
    return (
        <TextArea
            isDisabled
            placeholder="Tell us about your business"
            onChange={v => setValue(v)}
            value={value}
        />
    );
}

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.

function TextAreaExample() {
    const [value, setValue] = React.useState(
        'We provide DJ services in Austin and have been in business for 25 years.',
    );
    return (
        <TextArea
            hasError
            placeholder="Tell us about your business"
            onChange={v => setValue(v)}
            value={value}
        />
    );
}

function TextAreaExample() {
    const [value, setValue] = React.useState(
        'We provide DJ services in Austin and have been in business for 25 years.',
    );
    return (
        <TextArea
            hasError
            placeholder="Tell us about your business"
            onChange={v => setValue(v)}
            value={value}
        />
    );
}

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