Textarea – 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.

Using state

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

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.

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.

Show character counter

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

Markdown in labels

The label prop supports inline markdown: bold (**text**), italic (*text*), bold and italic (***text***), highlight (==text==), and code (`text`).

Hide the label

Use hideLabel to visually hide the label. The label string is converted to an aria-label on the input so it remains accessible to screen readers — any inline markdown is stripped to plain text.

<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.

hideLabel

boolean

default:"false"

Visually hides the label while keeping it accessible to screen readers via aria-label.

hint

string | ReactElement

label

string | ReactElement

Label for the field. Supports inline markdown formatting.

Omitting label is deprecated and will be required in v4.0.0. Use hideLabel to visually hide it. Passing ReactElement is also deprecated — use a plain string with inline markdown instead.

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

Textarea – Code

Common Examples

Getting the textarea value

In a form

Using state

Using a ref

Dynamic height

Show character counter

Markdown in labels

Hide the label

`Textarea` Props

Anvil2 Web

Resources

Documentation Index

​Common Examples

​Getting the textarea value

​In a form

​Using state

​Using a ref

​Dynamic height

​Show character counter

​Markdown in labels

​Hide the label

​Textarea Props

Common Examples

Getting the textarea value

In a form

Using state

Using a ref

Dynamic height

Show character counter

Markdown in labels

Hide the label

`Textarea` Props