Text Field – Code

Implementation
TextField Props

Common Examples

Import TextField from @servicetitan/anvil2 and pass a string label. The label is associated with the input. Unlisted attributes such as name are forwarded to the input, so the field participates in a native form submit.

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

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

Managing text field state

TextField keeps the input controlled internally. Omit value for an uncontrolled field, and pass defaultValue for an initial value. Pass value with onChange to control it. Do not pass value and defaultValue together.

Uncontrolled text fields

Give the field a name and submit it with a Button set to type="submit". Read the value from the form event, as in the example above.

Controlled text fields

Store the string in React state and pass it back through value. onChange receives the input’s change event.

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.

React Accessibility

TextField renders a native input and a label whose htmlFor matches the input id. When id is omitted, one is generated.

Pass a string label. That string is the accessible name. Omitting label is deprecated. On that deprecated path, placeholder is copied to aria-label when aria-label is also omitted.
hideLabel removes the visible label and sets aria-label from the label string, with inline markdown stripped. An explicit aria-label is ignored in that case.
When the label is visible, an explicit aria-label replaces the label as the accessible name. Omit aria-label so the visible label is announced.
prefix and suffix are aria-hidden. Put that meaning in label or hint.
required sets the input’s required attribute and adds a visual asterisk plus screen-reader text “Required” on the label.
A truthy error sets aria-invalid. Error text is announced with aria-live="assertive". Warning text is announced with aria-live="polite". errorAriaLive is ignored.
Hint, description, error, and warning are grouped in one region referenced by aria-describedby. Hint stays in that region when an error or warning is also shown.
moreInfo adds a button labeled “More information” after the label. The tooltip content is also exposed through aria-describedby.
The character counter is aria-hidden. While the user is typing and maxLength is set, a live region announces the remaining characters, or that the maximum has been reached.

For more guidance on form field labels and context, see input field context association best practices.

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

`TextField` Props

className and style apply to the root element. Layout utilities such as flex, gap, and the responsive sm through xxl props apply there as inline styles. Attributes that are not listed below, including name, autoComplete, and readOnly, spread onto the underlying input.type accepts only the values listed below. There is no width prop. The root is a column flex container and stretches to the width of its parent.

string

Accessible name for the input. When hideLabel is true and label is a string, this value is ignored and the label (with inline markdown removed) is used instead. When label is visible, aria-label replaces the label as the accessible name. When label is omitted, placeholder is used if aria-label is also omitted.

string

Class name on the root element, not the input.

string

Tracking id placed on the input. When omitted, a tracking id is generated from the label, labelProps other than aiMark, prefix, hint, description, size, and type.

string | number | readonly string[]

Initial value for an uncontrolled field. The input stays controlled internally. Do not pass value and defaultValue together.

ReactElement | string

Secondary copy rendered below hint.

boolean

default:"false"

Prevents interaction and dims the field.

boolean | string | ReactElement | string[]

Applies error styling and sets aria-invalid when truthy. true styles the field without a message. A string or string[] renders one or more error messages below the field. A React element still renders, but that form is deprecated. Pass a string or string[].

"off" | "assertive" | "polite"

Deprecated and ignored. Error messages always use aria-live="assertive".

boolean

default:"false"

Hides the visible label. label must be a string. That string, with inline markdown removed, is set as the input aria-label.

ReactElement | string

Always-visible instruction below the field. Stays rendered when an error or warning is also shown.

string

Id of the input and the target of the label htmlFor. Generated when omitted.

boolean

default:"false"

Applies a subdued primary background to draw attention to the field.

ReactNode

Accessible name shown above the field. A string supports inline markdown: bold (**text**), italic (*text*), bold and italic (***text***), highlight (==text==), and code (`text`).

Omitting label is deprecated and the prop will be required in v4.0.0. Use hideLabel to hide it visually. Passing a ReactNode other than a string is also deprecated. Use a string with inline markdown.

FieldLabelProps

Extra props for the visible FieldLabel, such as className or aiMark. These props spread after htmlFor, required, and moreInfo, so they can override those values.

boolean

default:"false"

Shows a spinner inside the field, after the input. The field stays editable.

number

Maximum number of characters the input accepts. Required when showCounter is true. The same value drives the visible counter and the “characters left” announcement while the user is typing. Browsers ignore this limit when type is "number". Use NumberField for a numeric range.

ReactNode

Tooltip content for the info button after the label. The same content is exposed to assistive technology through aria-describedby.

(event: ChangeEvent<HTMLInputElement>) => void

Called with the native change event after the field updates its value.

string

Prompt shown while the input is empty. This is not a replacement for label. It becomes the accessible name only when label and aria-label are both omitted.

string

Text rendered before the input. Hidden from assistive technology. Include the same meaning in label or hint.

boolean

default:"false"

Marks the input required and adds an asterisk plus screen-reader text “Required” on the label.

boolean

default:"false"

Shows an aria-hidden counter (current/maxLength) below the field. When true, maxLength is required.

"small" | "medium" | "large"

default:"medium"

Field height. "small" is 32px, "medium" is 40px, and "large" is 48px.

CSSProperties

Inline styles on the root element, merged with layout utilities. Not applied to the input.

string | ReactElement

Content rendered after the input. Hidden from assistive technology. Include the same meaning in label or hint.

default:"text"

HTML input type. Other input types are not supported.

string | number | readonly string[]

Controlled value. When passed, the field uses this value instead of internal state.

string | string[]

Warning copy rendered below errors, with a warning icon. Announced with aria-live="polite". Does not apply error styling.

Anvil2 Web

Resources

Text Field – Code

Common Examples

Managing text field state

Uncontrolled text fields

Controlled text fields

Show character counter

Markdown in labels

Hide the label

React Accessibility

`TextField` Props

​Common Examples

​Managing text field state

​Uncontrolled text fields

​Controlled text fields

​Show character counter

​Markdown in labels

​Hide the label

​React Accessibility

​TextField Props

Common Examples

Managing text field state

Uncontrolled text fields

Controlled text fields

Show character counter

Markdown in labels

Hide the label

React Accessibility

`TextField` Props