@thumbtack/tp-ui-react-textarea v3.3.0

package: '@thumbtack/tp-ui-react-textarea' kit: element/textarea.yaml platform: react

url: /api/components/element/textarea/react/

Textarea with state management

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.

<Textarea isDisabled placeholder="Tell us about your business" onChange={() => {}} />

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.

<Textarea
    hasError
    placeholder="Tell us about your business"
    value="We provide DJ services in Austin and have been in business for 25 years."
    onChange={() => {}}
/>