;
}
};
```tsx lines expandable theme={null}
import { TextField } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { TextField } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
);
}
```
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.
```tsx lines expandable theme={null}
import { TextField, Flex, Button } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
#### 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](/docs/web/components/button/design) can be used with `type="submit"` to submit all of the form input values.
```tsx lines expandable theme={null}
import { TextField, Flex, Button } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [value, setValue] = useState("");
return (
);
}
export default App;
```
#### 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.
```tsx lines expandable theme={null}
import { TextField } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Markdown in labels
The `label` prop supports inline markdown: bold (`**text**`), italic (`*text*`), bold and italic (`***text***`), highlight (`==text==`), and code (`` `text` ``).
```tsx lines expandable theme={null}
import { Flex, TextField } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### 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.
```tsx lines expandable theme={null}
import { Flex, TextField } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
```tsx theme={null}
```
## `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.
If `true`, the `TextField` will show an error state with no message. Any
non-boolean value will also display as an error message.
See [mdn
docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live).
Visually hides the label while keeping it accessible to screen readers via `aria-label`.
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.
Loading spinner is rendered when `true`
Required if `showCounter` is `true`.
