Components

Textarea(React)

Multiline inputs for text.

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

Basic textarea

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.

class TextareaExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: '',
        };

        this.onChange = this.onChange.bind(this);
    }

    onChange(newValue) {
        this.setState({
            value: newValue,
        });
    }

    render() {
        return (
            <div>
                <Label text="Business description">
                    <Textarea
                        value={this.state.value}
                        placeholder="Tell us about your business"
                        onChange={this.onChange}
                    />
                </Label>
            </div>
        );
    }
}

Disabled textarea

The isDisabled prop disables the Textarea visually and functionally.

class TextareaExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: undefined,
        };

        this.onChange = this.onChange.bind(this);
    }

    onChange(value) {
        this.setState({
            value,
        });
    }

    render() {
        const { value } = this.state;

        return (
            <Textarea
                isDisabled
                placeholder="Tell us about your business"
                onChange={this.onChange}
                value={value}
            />
        );
    }
}

Textarea with an error

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

class TextareaExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: 'We provide DJ services in Austin and have been in business for 25 years.',
        };

        this.onChange = this.onChange.bind(this);
    }

    onChange(value) {
        this.setState({
            value,
        });
    }

    render() {
        const { value } = this.state;

        return (
            <Textarea
                hasError
                placeholder="Tell us about your business"
                value={value}
                onChange={this.onChange}
            />
        );
    }
}

Props

Textarea

  • id

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

    Type
    string
    Default
    undefined
  • isDisabled

    Visually and functionally disable the textarea.

    Type
    bool
    Default
    false
  • isRequired

    Adds the required HTML attribute to the textarea.

    Type
    bool
    Default
    false
  • hasError

    Makes the textarea border and text color red.

    Type
    bool
    Default
    false
  • placeholder

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

    Type
    string
    Default
    undefined
  • name

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

    Type
    string
    Default
    undefined
  • value
    required

    The current value of the textarea.

    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
    Default
    undefined
  • 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
    func
  • onFocus

    Fires when the textarea receives focus.

    Type
    func
    Default
    undefined
  • onBlur

    Fires when the textarea loses focus.

    Type
    func
    Default
    undefined
  • dataTest

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

    Type
    string
    Default
    undefined