thumbtackpackage: '@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={() => {}}
/>