Text Field – Code

Implementation
TextField Props

Common Examples

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

function ExampleComponent() {
  return (
    <TextField
      label="Label"
      placeholder="Placeholder"
      hint="Hint text"
      moreInfo="More info"
      required
      error={false}
    />
  );
}

The TextField component can be used in the same way that you would use a pairing of HTML input and label elements.

Managing text field state

There are many ways to handle form element values and state. The Anvil2 TextField component is very flexible and can be implemented as part of a form, using React ref, or by manually controlling state.

Text fields in an uncontrolled form

Use a TextField in the same manner as an HTML input element with an associated label. The Anvil2 Button can be used with type="submit" to submit all of the form input values.

Controlled text fields

To manually control the state of a text field, use the value and onChange props along with a React state (or similar state management tool).

Show character counter

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

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.

<TextField
  label="Label"
  description="Description"
  hint="Hint text"
  error="Error message"
  errorAriaLive="assertive"
  loading={false}
  moreInfo="More info"
  prefix="Prefix"
  required={false}
  size="medium"
  suffix="Suffix"
  type="text"
  showCounter={true}
  maxLength={100}
  placeholder="Placeholder"
/>

`TextField` Props

The TextField component spreads any props not listed here to the underlying HTML input element, so props such as id and name will work as expected. However, the type prop is restricted to the values listed below. Note that there is no prop to control the width: the top-level element of the TextField is set to display: flex and it will expand to fill the width of its parent element.

description

ReactElement | string

disabled

boolean

default:"false"

error

ReactElement | string | boolean

If true, the TextField will show an error state with no message. Any non-boolean value will also display as an error message.

errorAriaLive

"off" | "assertive" | "polite"

default:"assertive"

See mdn docs.

hideLabel

boolean

default:"false"

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

hint

ReactNode

label

ReactNode

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 ReactNode is also deprecated — use a plain string with inline markdown instead.

boolean

Loading spinner is rendered when true

maxLength

number

Required if showCounter is true.

moreInfo

string

prefix

string

required

boolean

default:"false"

size

"small" | "medium" | "large"

default:"medium"

showCounter

boolean

suffix

string | ReactElement

type

default:"text"

Anvil2 Web

Resources

Text Field – Code

Common Examples

Managing text field state

Text fields in an uncontrolled form

Controlled text fields

Show character counter

Markdown in labels

Hide the label

`TextField` Props

Anvil2 Web

Resources

​Common Examples

​Managing text field state

​Text fields in an uncontrolled form

​Controlled text fields

​Show character counter

​Markdown in labels

​Hide the label

​TextField Props

Common Examples

Managing text field state

Text fields in an uncontrolled form

Controlled text fields

Show character counter

Markdown in labels

Hide the label

`TextField` Props