## Anatomy
The Text Field consists of six primary elements that work together to allow users to enter custom strings of text.
1. Label
2. Field
3. Prefix
4. Placeholder
5. Suffix
6. Description
## Options
Text Field supports multiple sizes, prefix, suffix, description, and required configurations to accommodate various text input scenarios.
### Sizes
```tsx lines theme={null}
import { TextField, Grid } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
| Size | Height |
| ------- | ------ |
| Small | 32px |
| Default | 40px |
| Large | 48px |
### Prefix
```tsx lines theme={null}
import { TextField } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
Text that can be used to clarify the format for the input. Most common use case is to represent a form of currency.
### Suffix
```tsx lines theme={null}
import { TextField } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
Suffixes are units of measurement, e.g., days, weeks, months, etc.
### Description
```tsx lines theme={null}
import { TextField } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
Descriptions provide information to help the user avoid errors.
### Required
```tsx lines theme={null}
import { TextField } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
A visual indicator applied to the label.
## Behavior
Text Field responds to user interaction with distinct visual states, flexible width behaviors, and overflow handling.
### Visual States
```tsx lines theme={null}
import { TextField, Grid } from "@servicetitan/anvil2";
function App() {
return (
{" "}
);
}
export default App;
```
### Widths
```tsx lines theme={null}
import { TextField, Grid } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
Text Fields should generally be as wide as the expected value entered.
Unless specified, Text Fields will fill all available horizontal space.
### Overflow
```tsx lines theme={null}
import { TextField } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
If the text content within a Text Field is long, the content will scroll horizontally inside of the container. The visible portion of the content will follow the cursor within the container.
## Usage Guidelines
Use the Text Field when you want a user to type a single line of text. If you want to allow for multiple lines of text, use a Text Area.
### How to Use
#### Labels and Help
For guidance on labels and help text, check out our [Labels and Help](/docs/web/patterns/forms#labels-and-help) pattern.
#### Text Field Validation
For form validation guidance, check out our [Form Errors and Validation](/docs/web/patterns/forms#form-validation) pattern.
## Content
Content within Text Field should clearly communicate the expected input through labels, prefixes, suffixes, and descriptions.
## Keyboard Interaction
Users can navigate Text Field using standard keyboard controls.
### Accessibility
* If a form field requires a specific format (e.g., state abbreviation), place that information in the label.
* Placeholder text is not a substitute for a label.
For more guidance on form field labels and context, see [input field context association best practices](/docs/accessibility/labels-and-ctas#input-field-context-association).
