Code

Implementation
Textarea Props

Common Examples

import { Textarea } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Textarea description="Description" label="Label" moreInfo="More info!" />
  );
}

Getting the textarea value

In a form

The Textarea component can be used in the same way that you would use an HTML textarea and label element.

Demo

Using state

Use the value prop to control the value of a Textarea using a state management strategy.

Demo

Using a ref

Use the value and ref props to control the value of a Textarea with a React ref and the ref.current.value.

Demo

Dynamic height

Use the autoHeight prop of the Textarea component to enable the element to grow to fit the text. Optionally, add maxRows and/or minRows to set height boundaries.

Demo

Show character counter

Use the maxLength and showCounter props to display a character counter below the textarea.

Demo

<Textarea
  label="Label"
  description="Description"
  hint="Hint text"
  error="Error message"
  autoHeight={false}
  disableResize={false}
  maxLength={100}
  maxRows={10}
  minRows={3}
  showCounter={true}
  required={false}
  moreInfo="More info"
  errorAriaLive="assertive"
  onChange={(e, state) => console.log(state.value)}
/>

`Textarea` Props

In addition to the props listed below, the Textarea component can accept any valid HTML textarea props. Note that the onChange prop has an additional state parameter the HTML textarea props does not.

onChange

(e: ChangeEvent, state?: TextareaState) => void;

required

The state parameter includes value: string

autoHeight

boolean

description

string | ReactElement

disableResize

boolean

default:"false"

error

string | ReactElement | boolean

errorAriaLive

"assertive" | "polite" | "off"

default:"assertive"

Use "polite" for live and instant validation.

hint

string | ReactElement

label

string | ReactElement

Passed as the children of the rendered label element.

labelProps

Passed to the underlying Label component.

maxLength

number

Required if showCounter is true.

maxRows

number

Only valid if autoHeight is true.

minRows

number

Only valid if autoHeight is true.

moreInfo

string

Text added to info icon tooltip in the label.

required

boolean

default:"false"

showCounter

boolean

Anvil2 Web

Resources

Common Examples

Getting the textarea value

In a form

Using state

Using a ref

Dynamic height

Show character counter

`Textarea` Props

Anvil2 Web

Resources

​Common Examples

​Getting the textarea value

​In a form

​Using state

​Using a ref

​Dynamic height

​Show character counter

​Textarea Props

Common Examples

Getting the textarea value

In a form

Using state

Using a ref

Dynamic height

Show character counter

`Textarea` Props