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.

Demo

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.

Demo

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.

Demo

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

hint

ReactNode

label

ReactNode

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

Common Examples

Managing text field state

Text fields in an uncontrolled form

Controlled text fields

Show character counter

`TextField` Props

Anvil2 Web

Resources

​Common Examples

​Managing text field state

​Text fields in an uncontrolled form

​Controlled text fields

​Show character counter

​TextField Props

Common Examples

Managing text field state

Text fields in an uncontrolled form

Controlled text fields

Show character counter

`TextField` Props