## Anatomy
The Number Field consists of seven primary elements that work together to accept numerical input.
1. Label
2. Field
3. Placeholder
4. Increment/Decrement buttons
5. Prefix
6. Suffix
7. Helper texts
## Options
The Number Field supports the following configurations to accommodate various numerical input scenarios.
### Sizes
```tsx lines theme={null}
import { NumberField, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
| Size | Height |
| ---------------- | ------------- |
| Small | 2rem (32px) |
| Medium (default) | 2.5rem (40px) |
| Large | 3rem (48px) |
### Prefix
```tsx lines theme={null}
import { NumberField } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
### Suffix
```tsx lines theme={null}
import { NumberField } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
## Behavior
The Number Field responds to user interaction with distinct visual states and flexible width behaviors.
### Overflow
```tsx lines theme={null}
import { NumberField } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
For long number entries, the content within a Number Field will scroll horizontally. The visible portion of the text will automatically follow the cursor, ensuring the user can always see what they're typing.
### Visual States
```tsx lines theme={null}
import { NumberField, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Widths
```tsx lines theme={null}
import { NumberField, Grid } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
Number Fields should generally be sized to the expected length of the value a user will enter. Unless a specific width is set, the field will automatically fill all available horizontal space.
## Usage Guidelines
Use the Number Field when accepting numerical input that doesn't have a dedicated component.
### When to Use
Number Field is the standard component for any numeric input that doesn't have a dedicated component. It's designed for general-purpose numeric values and allows you to use decimals, define step values, and set boundary limits.
Use it for:
* **Quantity:** The number of items, for example.
* **Measurements:** Values for height, weight, or distance.
* **IDs and Codes:** Numerical identifiers, such as account numbers.
**Note:** Dedicated components such as Percentage Field and Currency Field are planned to handle those specific use cases.
### How to Use
#### Read-only
Using a read-only Number Field is the recommended way to display information that users can review but not change. Unlike a disabled field, a read-only field remains fully accessible: users can still copy the text, focus the input, and interact with it using a screen reader. Additionally, it maintains the necessary contrast for optimal readability.
#### Prefixes and suffixes
Prefixes and suffixes provide clear context for a Number Field, preventing any misunderstanding of the value being entered.
##### Prefix
Use a prefix to add a descriptive label to the left of the input. For example, using Qty: helps a user immediately understand the purpose of the number they are entering.
##### Suffix
Use a suffix to provide a unit of measurement or another clarifying label to the right of the input. This is useful for units like items, minutes, or lbs.
##### Hiding/Showing the +/- controls
Hide the +/- controls when the value is something a user needs to type precisely rather than step through, such as an account number or ID. In those cases, the buttons add no value and should be omitted.
Show the +/- buttons when the value has a meaningful, predictable step, such as a quantity. When users will nudge a value up or down by a consistent amount and the range is small enough to navigate that way, the buttons make the interaction faster and more forgiving than typing. This works well when the value has a defined step and range.
#### Labels and Help text
For guidance on labels and help text, check out our [Labels and Help](/docs/web/patterns/forms#labels-and-help) pattern.
#### Validation
For form validation guidance, check out our [Form Errors and Validation](/docs/web/patterns/errors-and-warnings#form-errors-and-validation) pattern.
## Content
Content within the Number Field should clearly communicate the expected numerical value through labels, prefixes, and suffixes.
## Keyboard Interaction
Users can navigate the Number Field using standard keyboard controls.
