# Number

## Description

The Number field creates an input limited to numerical values.

## Screenshots

![Creating a Number field. ](https://www.advancedcustomfields.com/wp-content/uploads/2023/03/Creating-a-Number-Field.png)

Creating a Number field.

![The Presentation tab of the Number field allows you to provide instructions to content editors, show placeholder text, set step size (increments), add characters before and after the input, and define wrapper attributes. ](https://www.advancedcustomfields.com/wp-content/uploads/2023/03/Number-Field-Presentation-Layer.png)

The Presentation tab of the Number field allows you to provide instructions to content editors, show placeholder text, set step size (increments), add characters before and after the input, and define wrapper attributes.

![How the Number field is displayed to content editors in WP Admin.](https://www.advancedcustomfields.com/wp-content/uploads/2023/03/Number-Field-for-Content-Editors.png)

How the Number field is displayed to content editors in WP Admin.

## Settings

- **Default Value**  
  The default value shown when creating a new post.
- **Required**  
  Found on the Validation tab, this requires a numeric value be provided as the input and prevents the field from accepting empty values. Defaults to off.
- **Minimum Value**  
  The minimum value allowed.
- **Maximum Value**  
  The maximum value allowed.
- **Instructions**  
  Shows instructions when submitting data.
- **Placeholder Text**  
  Appears within input when no value exists.
- **Step Size**  
  The increment at which a numeric value can be set. Defaults to 1.
- **Prepend**  
  Adds a visual text element before the input.
- **Append**  
  Adds a visual text element after the input.

## Template usage

### Display value as text

This example demonstrates how to display a Number field value as text. We don’t recommend outputting any ACF value without any sort of protection or escaping.

```
<p>To date, your efforts have raised $<?php echo esc_html( get_field('latest_total') ); ?>!</p>
```

### Display value within CSS

This example demonstrates how a Number field value named “h2\_font\_size” can be used to control the font size of all `<h2>` elements.

```
<?php

$h2_font_size = get_field('h2_font_size');
if( $h2_font_size ): ?>
<style type="text/css">
    h2 {
        font-size: <?php echo esc_html( $h2_font_size ); ?>px;
    }
</style>
<?php endif; ?>
```